Setting up a map with multiple markers and triggering click events on them using setInterval is a simple process. First, create a map with the markers stored in an array. Then, utilize setInterval to automatically click on each marker.
Here is the HTML code:
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>
And here is the JavaScript code:
//Define the markers
var locations = [
[
"New Mermaid",
36.9079, -76.199,
1,
"Georgia Mason",
"",
"Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
"coming soon"
],
[
"1950 Fish Dish",
36.87224, -76.29518,
2,
"Terry Cox-Joseph",
"Rowena's",
"758 W. 22nd Street in front of Rowena's",
"found"
],
// Add more markers here...
];
// Set up the map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(36.8857, -76.2599),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
var i = 0;
setInterval(function() {
if (i == markers.length) i = 0;
google.maps.event.trigger(markers[i], 'click');
i++;
}, 3000);
Demo for sequential order: http://jsfiddle.net/lotusgodkk/pGBZD/153/
Demo for random order: http://jsfiddle.net/lotusgodkk/pGBZD/154/