Видео YouTube в окне информации о карте Google - PullRequest
11 голосов
/ 12 сентября 2010

Я пытаюсь поместить видео с 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>

Пример того, как он работает нормально для API Карт Google версии 2, приведен здесь http://www.virtualvideomap.com/

Также на http://maps.google.com Вы можете посмотреть видео на YouTube внутри информационного окна, работающего в Chrome и Safari, нажав «Еще ...» в правом верхнем углу карты, а затем отметив «Видео».

Ответы [ 3 ]

2 голосов
/ 07 октября 2010

Получил частичное решение, используйте режим встраивания 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>
2 голосов
/ 13 сентября 2010

Это ошибка веб-набора, но вы можете найти решение здесь: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ccaaee32b89e3656/c87bb19e4662bd78#c87bb19e4662bd78

0 голосов
/ 29 декабря 2013

Я недавно решил эту проблему, добавив стиль:
iframe { -webkit-transform:translate3d(0,0,0); }
в мой файл CSS. В моем случае весь динамический контент уже был внутри iFrame, и у меня все еще была эта проблема. Я видел это предложение о преобразовании где-то недавно, но только что попробовал сегодня. Я проверил его в Chrome и Safari на Windows 7. Все еще есть некоторая задержка положения, но сейчас она в основном работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...