Как рисовать маркеры по мере их добавления на карту

Question

Я размещаю более 300 маркеров на карте, используя OverlappingMarkerSpiderfier (не уверен, что это актуально), поэтому маркеры с одинаковым местоположением кластеризованы. В настоящее время код работает нормально, за исключением того, что все маркеры отображаются одновременно в конце цикла "for (var key in address['ASRAddr'])" в приведенном ниже коде.

То, что я хотел бы, чтобы карта нарисовала, и затем начала видеть маркеры, "льющиеся дождем" вниз в их положение. Использование атрибута DROP выполняет "дождевую" часть, но я не могу понять, как нарисовать каждый маркер, когда он добавлен на карту.

Вот код, который в значительной степени соединен из фрагментов в stackru (спасибо всем замечательным людям, которые внесли свой вклад. Не уверен, что я буду делать без 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>

Функции следующие:

decodeAddr: чтение JSON, содержащего адреса сайтов для всех узлов. getHC: чтение текстового файла, содержащего состояние узлов.

Остальные - это обычные фрагменты кода для добавления маркеров / инфо-пузырьков на карты.

Answer 1

Вот рабочий код, который я собрал воедино после просмотра комментариев geocodezip и Titus. У меня было 2 проблемы: 1) я не использовал множитель в setTimeout (50 мс в моем случае), и 2) должен был создать отдельную функцию для setTimeout, чтобы я мог передать ей idx из цикла for:

  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);
     });
  }