web-dev-qa-db-ja.com

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

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

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

正確にこのタスクを実行することになっているtilesloaded()メソッドが存在しますが、 は機能しません 。

javascripthtmlgoogle-maps
284
happygilmore892

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

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

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

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

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

587
ddinchev

私は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
    });
});
55
Pyry Liukas

Maps API v3を使用している場合、これは変わりました。

バージョン3では、基本的にbounds_changedイベント用のリスナーをセットアップしたいと思います。これはマップのロード時にトリガーされます。それがトリガーされたら、ビューポートの境界が変わるたびに通知を受けたくないのでリスナーを削除します。

V3 APIが進化しているので、これは将来変わるかもしれません:-)

15
timbo

あなたが web components を使っているなら、彼らは例としてこれを持っています：

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

2018年：

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

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

7
haffla

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

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

4
Adam Markowitz

変数mapはGMap2型のオブジェクトです。

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

私の場合は、リモートURLからロードされたTile Imageと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
});
0
Bala