Question

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

它在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>

适用于Google Maps API版本2的一个例子就是http://www.virtualvideomap.com/

同样在http://maps.google.com您可以通过点击地图右上角的“更多...”在Chrome和Safari中查看信息窗口内的YouTube视频，然后选中“视频”。

Answer 1

这是一个webkit错误，但您可以在此处找到解决方案：http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ccaaee32b89e3656/c87bb19e4662bd78#c87bb19e4662bd78

Answer 2

得到了部分解决方案，使用iframe嵌入模式将问题排序给我！

希望它有所帮助!!

<!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>

Answer 3

我最近通过添加样式解决了这个问题：
iframe { -webkit-transform:translate3d(0,0,0); }
到我的css文件。在我的情况下，所有的动态内容都已经在iFrame中，我仍然遇到这个问题。我前一段时间在某个地方看过这个转换建议，但今天才尝试过。我在Windows 7上的Chrome和Safari中进行了测试。仍有一些位置滞后，但它现在基本上工作正常。

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

3 个答案: