Google maps v3 - Cluster with delay
HTML
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
CSS
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#map_canvas {
height:100%;
width:100%;
}
JavaScript
var locations = [
[39.11009, -120.03169],
[37.77493, -122.41942],
[48.85320, 2.30206],
[48.77734, -121.81320],
[49.35365, -123.26187]
];
var map;
var markers = [];
var mc;
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 3,
center: new google.maps.LatLng(50.65338, -90.42969),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
mc = new MarkerClusterer(map, []);
function createMarker(location) {
var marker;
marker = new google.maps.Marker({
position: new google.maps.LatLng(location[0], location[1]),
animation: google.maps.Animation.DROP,
map: map
});
return marker;
}
function addMarker(data) {
return function () {
setTimeout(function () {
var marker = createMarker(data);
setTimeout(function () {
mc.addMarker(marker);
markers.push(marker);
}, 1500); // time until marker is added to clusterer
}, i * 100); // time between each marker falls
}
}
var i;
var markerFuncs = [];
for (i = 0; i < locations.length; i++) {
markerFuncs[i] = addMarker(locations[i]);
markerFuncs[i]();
}