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

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/