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>
