Как добавить медиафайл (видео) в инфовокне на гугл карте?

0

Я хочу добавить медиафайл (видео) в infowindow на карте google. Какой будет более простой способ сделать это?

Теги:
google-maps

2 ответа

2
Лучший ответ

См. РАБОЧИЙ ДЕМО ЗДЕСЬ. Здесь вы можете вставить любой фрагмент HTML. В моей демонстрации используется Youtube iframe, конечно же вы можете использовать тег HTML5 вместо этого.

var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Video in Info Window</h1>'+
      '<div id="bodyContent">'+
      '<iframe width="640" height="390" src="//www.youtube.com/embed/a8UOzBUZxCw" frameborder="0" allowfullscreen></iframe>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

См. Мою ОБНОВЛЕННУЮ ДЕМО с встроенным встроенным видео.

  • 0
    Мне не нужно использовать ссылку YouTube для показа видео. Если в моем каталоге есть видеофайл, как он будет отображаться?
  • 0
    @RaviMishra посмотрите мою обновленную демонстрацию с вашим собственным видео. Просто замените источник своим собственным файлом и путем.
0

Попробуйте добавить YouTube Video в качестве медиафайла в Google Map 'Infowindow. Проверьте это: https://groups.google.com/forum/#!topic/google-maps-js-api-v3/DHxExx5QjsA

И надеюсь, что этот примерный код даст представление о ваших требованиях.

<!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>
  • 0
    Мне не нужно использовать ссылку YouTube для показа видео. Если в моем каталоге есть видеофайл, как он будет отображаться?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню