How to draw markers as they are added to the map

Question

I am placing 300+ markers on a map using OverlappingMarkerSpiderfier (not sure if that is relevant) so same-location markers are clustered. Currently the code works fine, except that the markers are all displayed at the same time at the end of the "for (var key in addresses['ASRAddr'])" loop in the code below.

What I'd like is for the map to draw, and then start seeing markers "raining" down into their position. Using the DROP attribute does the "raining" part, but I can't figure out how to draw each marker as it is added to the map.

Here is the code that is pretty much patched together from snippets in stackoverflow (credits to all the fine folks who contributed. Not sure what I'd do without S/O):

<script>
  function decodeAddr(callback, map) {
    var jsonData = jQuery.ajax({
      url: "static/data.json",
      dataType: "json",
      async: false
      }).responseText;

    var addresses = JSON.parse(jsonData);

    callback(addresses, map);
  };

  function getHC(key) {
     var hc = jQuery.ajax({
        async: false,
        dataType: "text",
        cache: false,
        url: "/static/periodicHC/" + key.substring(0,11)
     }).responseText;
     return(hc);
  };

  function initMap(addresses, map) {
     var zColors = {"green" : 1, "yellow" : 2, "red" : 3};
     var iw = new InfoBubble();

     var oms = new OverlappingMarkerSpiderfier(map, {
       markersWontMove: true,
       markersWontHide: true,
       basicFormatEvents: true
     });

     for (var key in addresses['ASRAddr']) {
      var state = addresses['ASRAddr'][key]['state']
      var position = new google.maps.LatLng(addresses['ASRAddr'][key]['latitude'], addresses['ASRAddr'][key]['longitude']);

      marker = new google.maps.Marker({
        position: position,
        map: map,
        title: key + '\n' + addresses['ASRAddr'][key]['phyAddr'] + '\n\n' + getHC(key),
        zIndex: zColors[state],
        icon: "/static/images/googleMaps/" + state + "_MarkerA.png"
      });


      google.maps.event.addListener(marker, 'spider_click', function(e) {  // 'spider_click', not plain 'click'
        marker.addListener('mouseover', () => iw.open(map, marker));
        marker.addListener('mouseout', () => iw.close());
      });

      oms.addMarker(marker);  // adds the marker to the spiderfier _and_ the map
     }
  }

  function initPage() {
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 5,
       center: new google.maps.LatLng(38.0000, -97.0000)
     });

     google.maps.event.addListenerOnce(map, 'idle', function(){
       decodeAddr(initMap, map);
     });
  }
</script>

Functions are as follow:

decodeAddr: read a JSON containing the site addresses for all the nodes getHC: Read in a text file containing health of the nodes

The rest is the usual code snippets for adding markers/InfoBubbles to maps.

Answer 1

Here is the working code that I pieced together after reviewing geocodezip's and Titus's comments. I had 2 issues: 1) I wasn't using a multiplier in setTimeout (50ms in my case), and 2) had to create a separate function for the setTimeout so I could pass it the idx from the for loop:

  function setupMarker(idx, addresses, map, oms) {
    setTimeout(function() {
      var key = Object.keys(addresses['ASRAddr'])[idx];
      var state = addresses['ASRAddr'][key]['state']
      var position = new google.maps.LatLng(addresses['ASRAddr'][key]['latitude'], addresses['ASRAddr'][key]['longitude']);
      var zColors = {"green" : 1, "yellow" : 2, "red" : 3};
      var iw = new InfoBubble();

      marker = new google.maps.Marker({
        position: position,
        map: map,
        title: key + '\n' + addresses['ASRAddr'][key]['phyAddr'] + '\n\n' + getHC(key),
        zIndex: zColors[state],
        animation: google.maps.Animation.DROP,
        icon: "/static/images/googleMaps/" + state + "_MarkerA.png"
      });

      google.maps.event.addListener(marker, 'spider_click', function(e) {  // 'spider_click', not plain 'click'
        marker.addListener('mouseover', () => iw.open(map, marker));
        marker.addListener('mouseout', () => iw.close());
      });

      oms.addMarker(marker);  // adds the marker to the spiderfier _and_ the map
    }, 50*idx);
  }

  function initMap(addresses, map) {
     var oms = new OverlappingMarkerSpiderfier(map, {
       markersWontMove: true,
       markersWontHide: true,
       basicFormatEvents: true
     });

     for (i = 0; i < Object.keys(addresses['ASRAddr']).length; i++) {
      setupMarker(i, addresses, map, oms);
     }
  }

  function initPage() {
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 5,
       center: new google.maps.LatLng(38.0000, -97.0000)
     });

     google.maps.event.addListenerOnce(map, 'idle', function(){
       decodeAddr(initMap, map);
     });
  }