YouTube-Video in einem Google Map-Info-Fenster

Ich versuche, ein Youtube-Video in ein Infofenster von Google Map (v3) einzufügen.YouTube-Video in einem Google Map-Info-Fenster

Es funktioniert gut in Firefox und Internet Explorer.

Es funktioniert nicht arbeiten 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 manchmal auch gehackt.

Hier ist der Code, der für die Google Maps API-Version 2 ist hier http://www.virtualvideomap.com/

Auch auf http://maps.google.com Sie können sehen, YouTube-Videos innerhalb der Info-Fenster arbeiten

<!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 adaequat doe Klicken Sie in Chrome und Safari oben rechts auf der Karte auf "Mehr ..." und anschließend auf "Videos".

Quelle

2010-09-12 Drew LeSueur

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3160 –

Dies ist ein WebKit-Bug, aber man kann hier eine Lösung finden: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ccaaee32b89e3656/c87bb19e4662bd78#c87bb19e4662bd78

Quelle

2010-09-13 07:31:59 skarE

Vielen Dank. Nichtsdestotrotz funktioniert das Erstellen eines YouTube-Videos in einer Karte mit der Google Maps API Version 2 problemlos in Chrome und Safari. Sehen Sie diese Seite als ein Beispiel http://www.virtualvideomap.com/ (Sie können die Quelle auch sehen. Es ist ziemlich einfach, Javascript zu folgen) –

Haben Sie eine Teillösung, verwenden Sie den iframe embed-Modus, das Problem zu mir sortiert!

Hoffe es hilft !!

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

Quelle

2010-10-07 05:35:16 Trufa

Ich löste vor kurzem dieses Problem durch den Stil und fügte hinzu:
iframe { -webkit-transform:translate3d(0,0,0); }
meiner CSS-Datei. In meinem Fall war der gesamte dynamische Inhalt bereits in einem iFrame und ich hatte immer noch dieses Problem. Ich habe diesen Transformationsvorschlag schon vor einiger Zeit gesehen, aber ich habe es gerade erst ausprobiert. Ich habe es in Chrome und Safari unter Windows 7 getestet. Es gibt immer noch eine Positionsverzögerung, aber es funktioniert im Grunde jetzt gut.

Quelle

2013-12-28 23:15:56 Trevor

'-Webkit-Transform: translateZ (0)' scheint, genauso gut zu arbeiten. – Trevor

YouTube-Video in einem Google Map-Info-Fenster

Antwort

Verwandte Themen