YouTube-video in einem Google Map-Info-Fenster

Ich versuchte ein video auf youtube in einer Google-Karte (v3) - Info-Fenster.

Es funktioniert gut in Firefox und Internet Explorer.

Tut es nicht Arbeit in Safari und Chrome. In diesen Browsern, die Positionierung ist ausgeschaltet und das video bewegt sich nicht, wenn Sie die Karte verschieben. Das video bekommt auch gehackte manchmal.

Hier ist der code, doe

<!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, dass es funktioniert gut für die Google Maps API version 2 ist hier http://www.virtualvideomap.com/

Auch auf http://maps.google.com sehen Sie youtube-videos im Info-Fenster funktioniert in Chrome und Safari, indem Sie auf "Mehr..." oben rechts von der Karte, und dann ein Haken bei "Videos".

InformationsquelleAutor Drew LeSueur | 2010-09-12
  1. 2

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

    • Danke. Wenn man trotzdem ein youtube-video in einer Karte mittels der Google Maps API version 2 funktioniert gut in Chrome und Safari. Sehen Sie diese Seite als ein Beispiel virtualvideomap.com (Sie können die Quelle auch. Es ist ziemlich einfach zu Folgen, javascript)
    InformationsquelleAutor skarE
  2. 2

    Habe eine teilweise Lösung, die Verwendung der iframe-embed-Modus sortiert das problem aus mir!

    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>
    InformationsquelleAutor Trufa
  3. 0

    Ich habe vor kurzem dieses problem gelöst, durch hinzufügen der Stil:

    iframe { -webkit-transform:translate3d(0,0,0); }

    zu meiner css-Datei. In meinem Fall, der alle dynamischen Inhalte wurde bereits in einem iFrame und ich war immer noch das problem. Ich sah diese Transformation Vorschlag irgendwo eine Weile her, aber nur gerade versucht es heute. Getestet habe ich es in Chrome und Safari auf Windows 7. Es gibt noch einige position lag, aber im Grunde funktioniert jetzt.

    • -webkit-transform: translateZ(0) scheint zu funktionieren genauso gut.
    InformationsquelleAutor Trevor
Schreibe einen Kommentar