如何在 Google 地图标记上显示 FancyBox 视频？答案

【问题标题】：How to show a FancyBox video on a Google Map marker?如何在 Google 地图标记上显示 FancyBox 视频？
【发布时间】：2013-12-07 18:41:44
【问题描述】：

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

这是显示图像所需的 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 个标记的 Google 地图重新创建了这种情况，其中一个可以看到图像，另一个可以看到幻灯片，第三个可以看到视频。图像和幻灯片工作正常，但我看到的不是视频，而是一个空白框：

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

也许有人知道我怎样才能正确显示视频？

非常感谢！

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3 jquery-plugins

【解决方案1】：

使用以下js：

Demo

// 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
              });    
            });

【讨论】：