YouTube-Video in einem Google Map-Informationsfenster
Ich versuche, ein Youtube-Video in ein Google Map (v3) -Info-Fenster einzufügen.
Es funktioniert gut in Firefox und Internet Explorer.
Es tutnich Arbeit in Safari und Chrome. In diesen Browsern ist die Positionierung deaktiviert und das Video bewegt sich nicht, wenn Sie die Karte verschieben. Das Video wird auch manchmal gehackt.
Hier ist der Code, der @ d
<!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>
Ein Beispiel dafür, dass für die Google Maps API Version 2 einwandfrei funktioniert, finden Sie hierhttp: //www.virtualvideomap.com
Auch aufhttp: //maps.google.co Sie können YouTube-Videos im Info-Fenster in Chrome und Safari anzeigen, indem Sie oben rechts auf der Karte auf "Mehr ..." klicken und dann "Videos" aktivieren.