如何在谷歌地图标记上显示FancyBox视频

How to show a FancyBox video on a Google Map marker?

本文关键字：显示 FancyBox 视频 图标 谷歌 地图      更新时间：2023-09-26

我有一个简单的应用程序，里面有谷歌地图和标记。点击标记，我必须显示图像，幻灯片或视频。

这是显示图像（正常工作）所需的javascript：

     google.maps.event.addListener(marker1, 'click', function() {
    $.fancybox({
   href: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Tootsi_jaamahoone.jpg/800px-Tootsi_jaamahoone.jpg'
              // other options
                });     
            });

这是我尝试显示的视频：

      google.maps.event.addListener(marker3, 'click', function() {
              $.fancybox({
                  'type' : 'iframe',
                  // hide the related video suggestions and autoplay the video
                  'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go',
                  'overlayShow' : true,
                  'centerOnScroll' : true,
                  'speedIn' : 100,
                  'speedOut' : 50,
                  'width' : 640,
                  'height' : 480
              });    
            });

在这里，我用一个带有3个标记的谷歌地图重现了这种情况，其中一个可以看到图像，另一个可以看幻灯片，第三个可以看视频。图像和幻灯片正常工作，但我看到的不是视频，而是一个空白框：

http://jsbin.com/ANuyojoW/13/edit

也许有人知道我该如何正确显示视频？

非常感谢！

使用以下js:

演示

// Video - Not working 
google.maps.event.addListener(marker3, 'click', function() {
              $.fancybox({
                  'type' : 'iframe',
                  // hide the related video suggestions and autoplay the video
                  'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go'.replace(new RegExp("watch''?v=", "i"), 'v/'),
                  'overlayShow' : true,
                  'centerOnScroll' : true,
                  'speedIn' : 100,
                  'speedOut' : 50,
                  'width' : 640,
                  'height' : 480
              });    
            });
相关文章：