I am trying to put youtube videos inside infowindows, but it is not working. I get only empty windows.
Here is my code. Since it is my first Javascript project, I am sure that I am doing something wrong. Can you please help me find where the problem is?
I tried it on Chrome and 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>
