Google Maps APIのV3：オーバーレイイメージマップのローディングインジケーター

Question

と私は次のようなイメージマップオーバーレイを持っている：

var options = { 
    getTileUrl: function(coord, zoom) { 
     return myUrl+"?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
}; 

var overlay = new google.maps.ImageMapType(options); 
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
map.overlayMapTypes.insertAt(0, overlay); 

画像をロードするためにしばらく時間がかかることがあるので、私はそれらの（マップのロードインジケーターを表示したいですAJAX通話のための共通のアニメーションGIF）。マップ全体のインジケータが1つだけの場合、または各オーバーレイタイルのインジケータが1つしかない場合は、使いやすさが向上するかどうかはわかりません。したがって、両方のソリューションと考えは大歓迎です。

Answer 1

マップを保持するdivを非表示にするには、CSSを使用します。マップ上でaddEventListenerOnce()を使用して、idleイベントまたはおそらくbounds_changedイベントを待ち受けます。イベントが発生したときに、マップを保持するdivを表示させます。

イベントが発生するのを待っている間に進行状況インジケータを表示するには、少なくとも2つの合理的な方法があります。あなたは別のdivでそれを持つことができます（マップdivを明らかにすることに加えて）、イベントが発生すると非表示になります。または、別のdivの中にマップdivをラップし、そのdivの背景イメージをアニメーション進行インジケータイメージに設定することもできます。最後に

は、このブロックに似ているかもしれないあなたのコードは、私はあまりにも長い前に書かなければならなかった：

document.getElementById("map_canvas").style.visibility = "hidden"; 
var mapType = new google.maps.ImageMapType({ 
       tileSize: new google.maps.Size(256,256), 
       getTileUrl: function(coord,zoom) { 
        return 'img/tiles/'+zoom+'/'+coord.x+'/'+coord.y+'.png'; 
       } 
      }); 
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
map.overlayMapTypes.insertAt(0, mapType); 
google.maps.addListenerOnce(map, 'idle', function() { document.getElementById("map_canvas").style.visibility = "visible";});