Google Maps Version 3 has lot of new features of which one is to populate Markers with animation, I have made use of this animation with some delay using JavaScript so that Markers can be seen dropping one by one on the Map. In this short code snippet article I will explain how to populate Google Maps V3 with Markers having Drop Animation with delay.
Note: To populate Google Maps with Markers from Database in ASP.Net, refer my article ASP.Net: Google maps V3 with Multiple Markers Database Example
 
Google Maps V3 with Markers having Drop Animation with delay using JavaScript
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var markers = [
            {
                "title": 'Alibaug',
                "lat": '18.641400',
                "lng": '72.872200',
                "description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.'
            },
            {
                "title": 'Aurangabad',
                "lat": '19.879700',
                "lng": '75.335300',
                "description": 'Aurangabad'
            },
            {
                "title": 'Dombivli',
                "lat": '19.218400',
                "lng": '73.086700',
                "description": 'Dombivli'
            },
            {
                "title": 'Lonavla',
                "lat": '18.750000',
                "lng": '73.416700',
                "description": 'Lonavla'
            },
            {
                "title": 'Malegaon',
                "lat": '20.550500',
                "lng": '74.530900',
                "description": 'Malegaon'
            },
            {
                "title": 'Mumbai',
                "lat": '18.964700',
                "lng": '72.825800',
                "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.'
            },
            {
                "title": 'Nashik',
                "lat": '20.001400',
                "lng": '73.786900',
                "description": 'Nashik'
            },
            {
                "title": 'Pune',
                "lat": '18.523600',
                "lng": '73.847800',
                "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'
            },
            {
                "title": 'Shahpur',
                "lat": '19.450000',
                "lng": '73.330000',
                "description": 'Shahpur'
            },
            {
                "title": 'Shirdi',
                "lat": '19.770000',
                "lng": '74.480000',
                "description": 'Shirdi'
            },
            {
                "title": 'Thane',
                "lat": '19.182800',
                "lng": '72.961200',
                "description": 'Thane'
            },
            {
                "title": 'Vashi',
                "lat": '18.750000',
                "lng": '73.033300',
                "description": 'Vashi'
            }
    ];
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var i = 0;
        var interval = setInterval(function () {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                animation: google.maps.Animation.DROP
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            i++;
            if (i == markers.length) {
                clearInterval(interval);
            }
        }, 200);
    }
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
 
Explanation:
In the above code snippet, I have an HTML DIV which I am making use as a container control to populate Google Maps V3. I have a predefined array of markers that I need to populate on the Google Maps. I have made use of the JavaScript setInterval method to add delay to the process of binding the marker to the Maps. Secondly I assigned DROP animation to the marker.
With the above two changes we see the markers falling or dropping on the maps one by one.
Here I have set the delay of 200 milliseconds, you can change it as per your requirement.
Google Maps V3: Drop Markers with Animation (animated) and delay using JavaScript
 
Demo
View Demo
 
Downloads