使用谷歌地图 API 将视频附加到标记答案

【问题标题】：Attach video to marker using google map API使用谷歌地图 API 将视频附加到标记
【发布时间】：2014-12-16 11:19:24
【问题描述】：

所需的输出：将视频附加到标记

已经取得的成就：在特定位置放置标记的基本谷歌地图代码

想法：使用定义的标记变量来附加视频

尝试使用 Infowindow，但它不显示视频。请注意，视频与包含我的代码的文件位于同一文件夹中。有人可以帮忙吗？

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?&sensor=false">
</script>

<script>

   function initialize()
   {
        var mapProp = {
            center:new google.maps.LatLng(-20.240154, 57.589669),
            zoom:10,
            mapTypeId:google.maps.MapTypeId.ROADMAP
   };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var curepipe=new google.maps.Marker({
    position: new google.maps.LatLng(-20.318813, 57.524149)
});

curepipe.setMap(map);
var infowindow = new google.maps.InfoWindow({
      content:"Hello World!"
});

 infowindow.open(map,marker);
 }

  }

   google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>

【问题讨论】：

我已经成功使用 iFrame 作为 InfoWindow 的内容：youtube.com/embed/UmFjNiiVk9w?rel=0" frameborder="0">!
您是否刚刚将视频添加到网站或视频已附加到标记？
不，视频只是调用不同网站的 HTML。有关更多信息，请参阅其他答案。

标签： javascript html google-maps google-maps-markers

【解决方案1】：

您基本上已经拥有一切，只需要在InfoWindow 中添加一个html5 video 元素，同时确保您的视频文件可以通过您的服务器访问。

Aaaand，只有一些小改动：

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(-20.240154, 57.589669),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var curepipe = new google.maps.Marker({
    position: new google.maps.LatLng(-20.318813, 57.524149)
  });

  curepipe.setMap(map);

  var infowindow = new google.maps.InfoWindow({
    content: '<video controls="" style="width:100px;height:100px;" poster="poster.png">' +
    '<source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm;">' +
    '<source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;">' +
    '</video>'
  });

  infowindow.open(map, curepipe);
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<div id="googleMap" style="width:500px; height:500px;"></div>

编辑

我使用的视频来自this页面

【讨论】：

我想立即奖励赏金，但我只能在 22 小时后才能获得！ :( 非常感谢
这很好，但有没有其他方法可以在不使用 infowindow 的情况下完成？
唯一的方法似乎是通过覆盖（其中 infowindow 是其中之一）：developers.google.com/maps/documentation/javascript/overlays

【解决方案2】：

您可以通过添加 iframe 来做到这一点；

试试：

   function initialize() {

      var mapProp = {
          center: new google.maps.LatLng(-20.240154, 57.589669),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("googleMap"), mapProp)
      var curepipe = new google.maps.Marker({
          position: new google.maps.LatLng(-20.318813, 57.524149)
      });

      curepipe.setMap(map);
      var infowindow = new google.maps.InfoWindow({
          content: '<iframe title="YouTube video player" type="text/html" width="100%" height="100%" src="https://www.youtube.com/embed/0vrdgDdPApQ?rel=0" frameborder="0"></iframe>'
      });

      infowindow.open(map, curepipe);
}

HTML：

 <div id="googleMap" style="width: 100%; height: 100%"></div>

DEMO

【讨论】：