Question

我试图将youtube视频放在infowindows中，但它无效。我只有空窗户。

这是我的代码。由于这是我的第一个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 + '。

这只会修复最初在地图上的标记的InfoWindow。

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

Google地图API v3：YoutTube视频不会在infowindow中播放。我得到一个空白的窗口？

1 个答案: