Google 地图 API v3：信息window 中无法播放 Youtube 视频。我得到一个空白 window 而不是？

Question

我正在尝试将 youtube 视频放入 infowindows 中，但它不起作用。我只得到空 windows。

这是我的代码。由于这是我的第一个 Javascript 项目，我确定我做错了什么。你能帮我看看问题出在哪里吗？

我在 Chrome 和 Firefox 上试过了。

   <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
  <div id="map"></div>


  <script>
  function initMap(){
    // Map options
    var centerCoords = new google.maps.LatLng(52.2799, 8.0472);
    var options = {
      zoom:8,
      center:centerCoords,
      mapTypeId: google.maps.MapTypeId.TERRAIN    // satellite, hybrid, terrain, roadmap
    }

    // New map
    var map = new google.maps.Map(document.getElementById('map'), options);

    // Listen for click on map
    google.maps.event.addListener(map, 'click', function(event){
      // Add marker
      addMarker({coords:event.latLng});
    });

    // Array of markers
    var markers = [
      {
        coords: new google.maps.LatLng(52.2799, 8.0472),
        //content:'<h1> Osnabrueck </h1>',
        url: getYoutubeId('https://www.youtube.com/r6UbYB5yMX8'),
        //iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
      }  
    ];


    var any_window =false;
    for(var i = 0;i < markers.length;i++){
      // Add marker
      addMarker(markers[i], any_window);
    }

    function addMarker(props, any_window){
      var marker = new google.maps.Marker({
        position:props.coords,
        map:map,
        //icon:props.iconImage
      });

      // Check for customicon
      if(props.iconImage){
        // Set icon image
        marker.setIcon(props.iconImage);
      }

      // Check content
      if(props.url){
        var infoWindow = new google.maps.InfoWindow({
          embed_url: "https://www.youtube.com/embed/" + props.url,
          content: '<video controls="" style="height:350px; width:600px;><iframe title="YouTube video player">'
           + '<type="text/html" allow="autoplay; encrypted-media" src=embed_url frameborder="0" allowfullscreen></iframe></video>'

        });

        marker.addListener('click', function(){  //click, mouseover, mouseout
          if (!any_window){
            infoWindow.open(map, marker);
            any_window = true;
          }
        });

      } // end if props.content
    } //addMarker

//################ get youtube id function ######################
    function getYoutubeId(url){
      var videoid = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
      if(videoid == null) {
        console.log(url + " is not a valid YouTube url");
      }
        return videoid[1];
      };
//###############################################################

  } //initMap
  </script>
  <!--  ###########################################################  -->

  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=***API_KEY***&callback=initMap">
    </script>
</body>
</html>

Answer 1

我更改了这段代码：

var infoWindow = new google.maps.InfoWindow({
    embed_url: "https://www.youtube.com/embed/" + props.url,
    content: '<video controls="" style="height:350px; width:600px;><iframe title="YouTube video player">'
       + '<type="text/html" allow="autoplay; encrypted-media" src=embed_url frameborder="0" allowfullscreen></iframe></video>'

});

至：

var embed_url = "https://www.youtube.com/embed/" + props.url;
var infoWindow = new google.maps.InfoWindow({
    content: '<iframe title="YouTube video player" type="text/html" allow="autoplay; encrypted-media" src=' + embed_url + ' frameborder="0" allowfullscreen></iframe>'
});

看看this JSBin

我将 embed_url 设为变量而不是 InfoWindowOptions 对象的属性。然后我使用字符串连接将其值添加到 InfoWindow 内容中：src=' + embed_url + '.

这只会修复最初位于地图上的标记的信息窗口。

您必须修改代码，才能在您单击地图时为您创建的其他标记加载视频。

Google 地图 API v3：信息window 中无法播放 Youtube 视频。我得到一个空白 window 而不是？

Google map API v3: YoutTube videos are not played in infowindow. I get a blank window instead?

javascript

google-maps

youtube-api

infowindow

google-maps-api-3