带有许多标记的Google地图等待所有标记完全加载

Question

我有一张Google地图，其中我从Ajax页面加载了几个标记，如下所示。由于标记可能很多（最多2000个），我想在地图上添加某种叠加div来表示加载过程。

  var map;
  var markers = []; 
  var mapDiv = document.getElementById('map-canvas');
  function initialize() { //initialize the map and specify map options
    var mapOptions = {
      zoom: 6,
      center: new google.maps.LatLng(48,13),
      mapTypeId: 'terrain' 
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   }

为此，我最初在我的AJAX jquery函数的开头添加了一个jquery函数（$('#overlay').show();），以使div可见。这似乎工作正常。我的问题是，当我在jquery函数的末尾设置相应的隐藏函数（$('#overlay').hide();）时，div会在所有标记完全加载之前消失。是否可以等到地图正确加载所有（2000）标记？

  var resultsArr = new Array();
  var n = 0;
  var f = function () { 
    n++;
    $('#overlay').show(); //div overlaying at the beginning of the function
    $.ajax({
      url: "ajax_page.php",
      type: "POST",
      data: {func: 'getLocation'},
      dataType: 'json',
      success: function(data) {
        resultsArr.push(data);

        for (var i=0; i<markers.length; i++) {
          markers[i].setMap(null);
        }
        markers = [];
        addmarkersfromarray(resultsArr); 
       $('#overlay').hide(); //my problem
      }
    });

以下是addmarkersfromarray函数。我已经看到一个可能的方法是在地图上添加一个事件监听器（如google.maps.event.addListener(marker, 'tilesloaded', fullyloaded);）以检查它何时完成加载但我不明白我应该如何设置它。

  function addmarkersfromarray(locations) {
    arraywise = locations[0]; 
    numberofevents = arraywise.length; 
    for (var i = 0; i < numberofevents; i++ ) { 
      var metricswise = locations[0][i];
      var myLatLng = new google.maps.LatLng(metricswise.latitude, metricswise.longitude);
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map, 
        title: metricswise.location, 
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillOpacity: 0.5,
          fillColor: '#ff0000',
          strokeOpacity: 0.3,
          strokeColor: '#fff000',
          strokeWeight: 1.0, 
          scale: 4
        }    
      });
//??//??//??//??//??//??//??//??//??//??//??//??
            google.maps.event.addListener(marker, 'tilesloaded', fullyloaded); 
            function fullyloaded() {
              alert("helllo");
              $('#overlay').hide();
            }
//??//??//??//??//??//??//??//??//??//??//??//??          
      var infowindow = new google.maps.InfoWindow();
      google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
          var metricswise = locations[0][i];
          var contentString = 'this is an infowindow ';
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
        }
      })(marker, i));
      markers.push(marker);
    }
  }