benutzerdefinierte Überlagerung auf Google-Karte

Question

Wie mache ich das Fortschrittsrad nur zeigen, bis alle Marker geplottet sind? Es gibt 50 Adressen, die jQuery jede Funktion durchläuft und geocodiert und plottet als Marker und ich muss das Fortschrittsrad nur anzeigen, bis alle diese geplottet sind und dann das Fortschrittsrad ausblenden und die Karte mit allen Macher anzeigen.

var geocoder; 
     var map; 
     function initialize() { 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(42.095287, -79.3185139); 
     var myOptions = { 
      maxZoom: 14, 
      zoom: 9, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
     }; 
     map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 
      createOverlay(); 
     } 

    function codeAddress() { 
     var infowindow = new google.maps.InfoWindow({}); 
     $('.LocationAddress').each(function() { 
      var addy = $(this).text(); 
      geocoder.geocode({ 'address': addy}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
         map.setCenter(results[0].geometry.location); 
         var marker = new google.maps.Marker({ 
         position: results[0].geometry.location, 
         map: map,    
         title:addy, 
        }); 

       //Adding a click event to the marker 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>' 
              +'<div id=\"LeftInfo\">'+ "Hello World!" 
              +'</div>'+'</div>'); 
        infowindow.open(map, this); 
       }); 
      } 
      });//Geocoder END 

     }); 
    } 

     subOverlay.prototype = new google.maps.OverlayView(); 
     //constructor for subOverlay 
     function subOverlay(bounds, image, map) { 
      // Now initialize all properties. 
      this.bounds_ = bounds; 
      this.image_ = image; 
      this.map_ = map; 
      this.div_=null; 
      // Explicitly call setMap() on this overlay 
      this.setMap(map); 
     } 

     //Adding elements to overlay 
     subOverlay.prototype.onAdd = function() { 
      // Create the DIV and set some basic attributes. 
      var div = document.createElement('DIV'); 
      div.style.borderStyle = "none"; 
      div.style.borderWidth = "0px"; 
      div.style.position = "absolute"; 

      var img = document.createElement("img"); 
      img.src = this.image_; 
      img.style.width = "50px"; 
      img.style.height = "50px"; 
      div.appendChild(img); 

      // Set the overlay's div_ property to this DIV 
      this.div_ = div; 

      // We add an overlay to a map via one of the map's panes. 
      // We'll add this overlay to the overlayImage pane. 
      var panes = this.getPanes(); 
      panes.overlayImage.appendChild(div); 
     } 

     //drawing overlay on map 
     subOverlay.prototype.draw = function() { 
      var overlayProjection = this.getProjection(); 
      var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
      var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 

      // Resize the image's DIV to fit the indicated dimensions. 
      var div = this.div_; 
      div.style.left = sw.x + 'px'; 
      div.style.top = ne.y + 'px'; 
      div.style.width = (ne.x - sw.x) + 'px'; 
      div.style.height = (sw.y - ne.y) + 'px'; 
     } 
     //function create overlay 
     function createOverlay() 
     { 
      var swBound = new google.maps.LatLng(14, -14); 
      var neBound = new google.maps.LatLng(14, -14); 
      var bounds = new google.maps.LatLngBounds(swBound, neBound); 

      // Photograph courtesy of the U.S. Geological Survey 
      var srcImage = 'http://i276.photobucket.com/albums/kk35/cat_being/GIF%20Movie%20Gear/th_progress_wheel.gif'; 
      overlay = new subOverlay(bounds, srcImage, map); 
     } 

Answer 1

Verwenden Sie das Google Kartenereignis idle.

Etwas wie:

google.maps.event.addListener(map, 'idle', function() { 

    // Hide the loader now. 

}); 

In der Tat das erste Mal meine Karte Projekte Laden getan werden ich einige Aktionen nur einmal; wie:

var init = true; 
google.maps.event.addListener(map, 'idle', function() { 

    if(init){ init = false; 
     // init only idle actions 
    } 
    // every idle actions 

});