Как я могу проверить, полностью ли загружены Карты Google?

Question

Я встраиваю Карты Google на свой веб-сайт. После загрузки Карт Google мне нужно запустить несколько процессов JavaScript.

Есть ли способ автоматического определения полной загрузки Карт Google, включая загрузки листов и все такое?

Существует метод tilesloaded(), который должен выполнять именно эту задачу, но он не работает .

Answer 1

Это беспокоило меня некоторое время с GMaps v3.

Я нашел способ сделать это так:

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

Событие "idle" запускается, когда карта переходит в состояние ожидания - все загружено (или не удалось загрузить). Я обнаружил, что он более надежен, чем tileloaded / bounds_changed, и с помощью метода addListenerOnce код в замыкании выполняется при первом запуске «idle», а затем событие отключается.

См. Также раздел событий в Справочнике по Google Maps.

Answer 2

Я создаю мобильные приложения 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
    });
});

Answer 3

Если вы используете Maps API v3, это изменилось.

В версии 3 вы по существу хотите настроить прослушиватель для события bounds_changed, которое сработает при загрузке карты. После того, как это сработало, удалите слушателя, так как вы не хотите получать информацию каждый раз, когда изменяются границы области просмотра.

Это может измениться в будущем по мере развития API V3: -)

Answer 4

Если вы используете веб-компоненты , то они имеют это в качестве примера:

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

Answer 5

В 2018 году:

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

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

Answer 6

GMap2::tilesloaded() будет событие, которое вы ищете.

См. GMap2.tilesloaded для справок.

Answer 7

Где переменная map является объектом типа GMap2:

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

Answer 8

В моем случае, Tile Image, загруженный с удаленного 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
});

Answer 9

Вы можете проверять метод GMap2.isLoaded() каждые n миллисекунды, чтобы увидеть, были ли загружены карта и все ее тайлы (window.setTimeout() или window.setInterval() ваши друзья).

Хотя это не даст вам точное событие завершения загрузки, оно должно быть достаточно для запуска вашего Javascript.