Como posso verificar se o Google Maps está totalmente carregado?

Estou incorporando o Google Maps no meu site. Depois que o Google Maps é carregado, preciso iniciar alguns processos JavaScript.

Existe uma maneira de detectar automaticamente quando o Google Maps está totalmente carregado, incluindo downloads de blocos e tudo?

Existe um tilesloaded()método que deve realizar exatamente essa tarefa, mas não funciona .

Isso me incomodou por um tempo com o GMaps v3.

Eu encontrei uma maneira de fazê-lo assim:

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

O evento "ocioso" é acionado quando o mapa entra no estado ocioso - tudo carregado (ou falhou ao carregar). Eu achei que era mais confiável, então tilesloaded / bounds_changed e, usando o addListenerOncemétodo, o código no fechamento é executado na primeira vez em que "inativo" é acionado e o evento é desanexado.

Veja também a seção de eventos na Referência do Google Maps.

Estou criando html5 aplicativos móveis e notei que o idle, bounds_changede tilesloadedeventos fogo quando o objeto do mapa é criado e processado (mesmo se não estiver visível).

Para fazer meu mapa executar o código quando ele é mostrado pela primeira vez, fiz o seguinte:

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

Se você estiver usando a API do Google Maps v3, isso mudou.

Na versão 3, você deseja essencialmente configurar um ouvinte para o bounds_changedevento, que será acionado após o carregamento do mapa. Depois que isso for acionado, remova o ouvinte, pois você não deseja ser informado toda vez que os limites da janela de visualização mudam.

Isso pode mudar no futuro, à medida que a API da V3 estiver evoluindo :-)

Em 2018:

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

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

Se você estiver usando componentes da Web , eles terão isso como exemplo:

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

GMap2::tilesloaded() seria o evento que você está procurando.

Veja GMap2.tilesloaded para referências.

Onde a variável mapé um objeto do tipo GMap2:

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

No meu caso, a imagem em bloco carregada a partir do URL remoto e o tilesloadedevento foi acionado antes da renderização da imagem.

Eu resolvi com o seguinte caminho sujo.

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

Você pode verificar o GMap2.isLoaded()método a cada nmilissegundo para ver se o mapa e todos os seus blocos foram carregados ( window.setTimeout()ou window.setInterval()são seus amigos).

Embora isso não forneça o evento exato da conclusão do carregamento, deve ser bom o suficiente para acionar seu Javascript.