JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="http://www.youtube.com/watch?v=sNUDDaEOvuY" title="Video caption" class="lightbox">Video title</a> <br></br>
<div id="map-canvas"></div>
CSS
#map-canvas {
width:600px;
height:600px;
position:"absolute";
top: 0px;
left: 0px;
overflow:"hidden";
}
JavaScript
var BERLIN = new google.maps.LatLng(52.520816, 13.410186),
map = null,
marker = null,
index = 0,
infoWindow = null;
function createMap() {
return new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: BERLIN,
zoom: 12
});
}
function dropMarker(map, pos, box) {
return new google.maps.Marker({
map: map,
position: pos,
draggable: false,
});
}
function changeMarker() {
if (marker) {
infoWindow.close();
marker.setMap(null);
}
var pos = NEIGBORHOODS[index];
var box = infowindows[index];
marker = dropMarker(map, pos, box);
var contentString = ('lat:' + box.lat+ '<br />' + 'lng:' + box.lng + '<br />' +'name:' + box.name +'<br />'+ box.url);
infoWindow.setContent( contentString);
idTimeOut = setTimeout(function () {
infoWindow.open(map, marker);
}, 500);
index = (index + 1) % NEIGBORHOODS.length;
google.maps.event.addListener(marker, "mouseover", function() {
console.log(infoWindow)
clearTimeout(idTimeOut);
clearTimeout(idTimeOut2);
})
google.maps.event.addDomListener(infoWindow.content_, 'click', function(){console.log('clicked !!')});
google.maps.event.addListener(marker, "mouseout", function() {
console.log('out');
idTimeOut = setTimeout(function () {
changeMarker();
}, 4000);
})
idTimeOut2 = setTimeout(function () {
changeMarker();
}, 4000);
}
map = createMap();
infoWindow = new google.maps.InfoWindow();
$.post('/echo/json/', {
json: JSON.stringify([{
lat: 52.511467,
lng: 13.447179,
name:'Paul',
url:'<iframe width="250" height="125" src="//www.youtube.com/embed/u9yDWiosyfk" frameborder="0" allowfullscreen></iframe>'
}, {
lat: 52.549061,
lng: 13.422975,
name:"Paolo",
url:'<iframe...