Drop One Marker at time

Question

I\'m using Google Maps Api v3 and I\'m trying to drop one marker at time on my Map, just like Google Demo but I could not get it to work, here\'s my code, all markers are droppe

Answer 1

1. add the markers to the clusterer as they are added to the map
2. adjust the bounds to show the markers as they are added
3. fixed typo in your JSON (don't know if that is a problem or not)

function initialize() {
    var latlng = new google.maps.LatLng(52.520816, 13.410186);

    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), options);
    loadMarkers();
}

function loadMarkers() {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/echo/json/',
        data: {
            json: JSON.stringify(jsonData)
        },
        delay: 3,
        success: function (data) {
            var markerCluster = new MarkerClusterer(map, markers);
            var latlngbounds = new google.maps.LatLngBounds();
            $.each(data, function (index, point) {
                    setTimeout(function() {
                      var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(point.Lat, point.Lng),
                        animation: google.maps.Animation.DROP,
                        map: map /* don't have your custom marker
                        icon: 'img/marker.png'*/
                      });
                      markerCluster.addMarker(marker);
                      markers.push(marker);
                      // adjust the bounds to show all the markers
                      latlngbounds.extend(marker.getPosition());
                      map.fitBounds(latlngbounds);
                    }, point.Id * 200);
            });
        }
    });
}

working fiddle

Answer 2

Initially create the marker with these values:

   var marker = new google.maps.Marker({
            position: new google.maps.LatLng(point.Lat, point.Lng),
            map: null,
            visible:false
    });

set a variable used for the counter for the timeout, and always reset this vaiable when the zoom of the map changes(what forces a re-clustering)

google.maps.event.addListener(map,'zoom_changed',function(){
  this.set('counter',0);
})

observe the map_changed-event of the markers to apply the animation when a previous clustered marker has been removed from a cluster

google.maps.event.addListener(marker,'map_changed',function(){
      var marker=this,map=this.getMap();
      //the marker has been clustered
      if(!this.getMap()){     
        this.setValues({visible:false});
      }
      //the marker is not a part of a cluster
      else{
        //the marker has been clustered before, set visible and animation with a delay
        if(!this.getVisible()){
            var counter=this.getMap().get('counter')+1;
            //set the new counter-value
            this.getMap().set('counter',counter);
            setTimeout(function(){marker.setValues({animation:google.maps.Animation.DROP,
                                                    visible:true});},
                       200*counter)
        }
      }


});

Result: http://jsfiddle.net/doktormolle/9jaLqpfd/