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地圖信息窗口中

回答

相關問題