Googleマップのカスタムオーバーレイ

Question

すべてのマーカーがプロットされるまで、進捗ホイール表示を行うにはどうすればよいですか？ jqueryが各機能を通過し、ジオコードとマーカーとしてプロットする50個のアドレスがあります。それらのすべてがプロットされるまで進捗ホイールを表示してから、進捗ホイールを非表示にしてすべてのメーカーと地図を表示する必要があります。

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

Googleマップイベントidleを使用してください。

何かのように：実際には

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

    // Hide the loader now. 

}); 

私マッププロジェクトのロードが行われて初めて、私は一度だけいくつかのアクションを実行します。 like：

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

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

});