YouTube视频在Google地图信息窗口中

我正在尝试将YouTube视频放入Google地图（v3）信息窗口中。YouTube视频在Google地图信息窗口中

它在Firefox和Internet Explorer中正常工作。

它确实不是在Safari和Chrome中工作。在这些浏览器中，定位功能关闭，移动地图时视频不会移动。视频有时也会被切碎。

这里是能源部

<!doctype html> 
<html> 
<head> 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
var map; 
function initialize() { 
    latlng = new google.maps.LatLng(33.4222685, -111.8226402) 
    myOptions = { 
     zoom: 4, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map"),myOptions) 
    var point = new google.maps.LatLng(33.4222685, -111.8226402); 
    var marker = new google.maps.Marker({ 
     position: point, 
     map: map 
    }) 
    google.maps.event.addListener(marker, "click", function(){ 
     bubble = new google.maps.InfoWindow({ 
      content: '<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/UmFjNiiVk9w?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UmFjNiiVk9w?fs=1" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>' 
     }) 
     bubble.open(map, marker); 
    }) 
} 
</script> 
</head> 
<body onload="initialize();"> 
    <div id="map" style="width: 984px; height: 495px"></div> 
</div> 
</body> 
</html>

它的一个例子在谷歌地图API第2版做工精细的代码是在这里http://www.virtualvideomap.com/

同样在http://maps.google.com你可以看到里面的信息窗口工作YouTube视频在Chrome和Safari中点击地图右上角的“更多...”，然后选中“视频”。

来源

2010-09-12 Drew LeSueur

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3160 – 2011-05-06 03:54:35

这是一个WebKit的bug，但你可以在这里找到一个解决方案：http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ccaaee32b89e3656/c87bb19e4662bd78#c87bb19e4662bd78

来源

2010-09-13 07:31:59 skarE

谢谢。尽管如此，使用谷歌地图API版本2在地图上放置YouTube视频在Chrome和Safari中运行得很好。以此网站为例http://www.virtualvideomap.com/（您也可以查看源代码，它很容易遵循javascript） – 2010-09-14 02:08:33

得到了部分解决方案，使用iframe嵌入方式排序的问题拿出来给我！

希望它有帮助！
iframe { -webkit-transform:translate3d(0,0,0); }
我的css文件：

<!doctype html> 
<html> 
<head> 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
var map; 
function initialize() { 
    latlng = new google.maps.LatLng(33.4222685, -111.8226402) 
    myOptions = { 
     zoom: 4, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map"),myOptions) 
    var point = new google.maps.LatLng(33.4222685, -111.8226402); 
    var marker = new google.maps.Marker({ 
     position: point, 
     map: map 
    }) 
    google.maps.event.addListener(marker, "click", function(){ 
     bubble = new google.maps.InfoWindow({ 
      content: '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/UmFjNiiVk9w?rel=0" frameborder="0"></iframe>' 
     }) 
     bubble.open(map, marker); 
    }) 
} 
</script> 
</head> 
<body onload="initialize();"> 
    <div id="map" style="width: 984px; height: 495px"></div> 
</div> 
</body> 
</html>

来源

2010-10-07 05:35:16 Trufa

我最近加入的样式解决了这个问题。在我的情况下，所有的动态内容已经在一个iFrame中，我仍然有这个问题。我在一段时间前的某个地方看到了这个转换建议，但只是今天才尝试过。我在Windows 7上使用Chrome和Safari进行了测试。仍然存在一些位置滞后现象，但现在基本正常。

来源

2013-12-28 23:15:56 Trevor

'-webkit-transform：translateZ（0）'似乎也可以正常工作。 – Trevor 2013-12-29 22:02:28

YouTube视频在Google地图信息窗口中

回答

相关问题