Googleマップが完全に読み込まれているかどうかを確認するにはどうすればよいですか？

Googleマップを自分のWebサイトに埋め込んでいます。Googleマップが読み込まれたら、いくつかのJavaScriptプロセスを開始する必要があります。

タイルのダウンロードなど、Googleマップが完全に読み込まれたときに自動検出する方法はありますか？

tilesloaded()この方法は、それがまさにこのタスクを達成することではなくなっている存在、それは動作しません。

これは、しばらくの間、GMaps v3で私を悩ませていました。

私はそれをこのようにする方法を見つけました：

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});

「アイドル」イベントは、マップがアイドル状態になるとトリガーされます-すべてがロードされました（またはロードに失敗しました）。私はそれがtilesloaded / bounds_changedより信頼性が高く、addListenerOnceメソッドを使用してクロージャ内のコードが最初に "アイドル"が発生したときに実行され、その後イベントがデタッチされることがわかりました。

Googleマップリファレンスのイベントセクションもご覧ください。

私はhtml5モバイルアプリを作成していますが、マップオブジェクトが作成されてレンダリングされると（表示されていなくてもidle）bounds_changedとtilesloadedイベントが発生することに気付きました。

マップが初めて表示されたときにコードを実行するには、次のようにしました。

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    //this part runs when the mapobject is created and rendered
    google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
        //this part runs when the mapobject shown for the first time
    });
});

Maps API v3を使用している場合、これは変更されています。

バージョン3では、bounds_changedマップのロード時にトリガーされるイベントのリスナーを設定する必要があります。それがトリガーされたら、ビューポートの境界が変更されるたびに通知を受けたくないので、リスナーを削除します。

V3 APIが進化しているため、これは将来変更される可能性があります:-)

2018年：

var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })

https://developers.google.com/maps/documentation/javascript/events

Webコンポーネントを使用している場合、例として次のようになります。

map.addEventListener('google-map-ready', function(e) {
   alert('Map loaded!');
});

GMap2::tilesloaded() あなたが探しているイベントになります。

参照については、GMap2.tilesloadedを参照してください。

変数mapがGMap2タイプのオブジェクトである場合：

    GEvent.addListener(map, "tilesloaded", function() {
      console.log("Map is fully loaded");
    });

私の場合、リモートURLから読み込まれたタイル画像と tilesloaded画像をレンダリングする前にイベントがトリガーされました。

以下の汚いやり方で解決しました。

var tileCount = 0;
var options = {
    getTileUrl: function(coord, zoom) {
        tileCount++;
        return "http://posnic.com/tiles/?param"+coord;
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.5,
    isPng: true
};
var MT = new google.maps.ImageMapType(options);
map.overlayMapTypes.setAt(0, MT);
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    var checkExist = setInterval(function() {
        if ($('#map_canvas > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > div').length === tileCount) {
            callyourmethod();
            clearInterval(checkExist);
        }
    }, 100); // check every 100ms
});

ミリ秒GMap2.isLoaded()ごとにメソッドをチェックしてn、マップとそのすべてのタイルがロードされているwindow.setTimeout()かどうかwindow.setInterval()を確認できます（またはあなたの友達です）。

これはロード完了の正確なイベントを提供しませんが、Javascriptをトリガーするのに十分なはずです。