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

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

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

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

Это беспокоило меня некоторое время с 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.

Я создаю мобильные приложения 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события, которое будет срабатывать при загрузке карты. Как только это сработает, удалите слушателя, так как вы не хотите получать информацию каждый раз, когда изменяются границы области просмотра.

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

В 2018 году:

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

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

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

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");
    });

В моем случае 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
});

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

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