Question

Thanks for reading this …

I’ve been searching and experimenting for 3 days trying to solve a pretty basic javascript issue.

I’m creating a Google map with 45 markers. The markers:

• are clustered using the MarkerClusterer utility
• can be clicked to open an infowindow (each one displays a different image)
• all “drop” nicely into place when the page loads.

So far so good.

The problem is applying a “setTimeout” function to drop the markers sequentially (instead of all at once). I’ve tried a dozen variations, nothing works.

I’m a total novice, any help would be hugely appreciated!

You can view a simplified version of the map at:

http://www.domatchaworld.com/googlemap6.html

Here is the code:

var locations = [  
[39.11009, -120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'],
[37.77493, -122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'],
[48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'],
[48.77734, -121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'],
[49.35365, -123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>']
]; 

var map;
var markers = [];
var mc; 
var mcOptions = {
  gridSize: 20,
  maxZoom: 15
};

map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 3,
center: new google.maps.LatLng(31.65338, -40.42969),
mapTypeId: google.maps.MapTypeId.TERRAIN
});

mc = new MarkerClusterer(map, [], mcOptions);

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});

var marker;
var i;

for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    animation: google.maps.Animation.DROP,
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][2]);
      infowindow.open(map, marker);
    }
  })(marker, i));

mc.addMarkers(markers, true);

markers.push(marker); //push local var marker into global array

}

Answer 1

Instead of adding all markers to the MarkerClusterer at once, create your array of markers, then animate them (I’ve copy pasted your code and added comments at the end…):

var locations = [
    [39.11009, - 120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'],
    [37.77493, - 122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'],
    [48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'],
    [48.77734, - 121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'],
    [49.35365, - 123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>']
];

var map;
var markers = [];
var mc;
var mcOptions = {
    gridSize: 20,
    maxZoom: 15
};

map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 3,
    center: new google.maps.LatLng(31.65338, - 40.42969),
    mapTypeId: google.maps.MapTypeId.TERRAIN
});

mc = new MarkerClusterer(map, [], mcOptions);

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(map, 'click', function () {
    infowindow.close();
});

var marker;
var i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        animation: google.maps.Animation.DROP,
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][2]);
            infowindow.open(map, marker);
        }
    })(marker, i));

    //don't add to cluster yet
    //mc.addMarkers(markers, true);

    markers.push(marker); //push local var marker into global array

}

// now animate and add to cluster
(function animateNextMarker() {
  if (markers.length > 0) {
    mc.addMarker(markers.pop(), true);
    setTimeout(animateNextMarker, 250);
  }
})();

Hope this helps 🙂