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

293

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 .

TRiG
fonte
2
O evento "tilesloaded" parece funcionar para mim. É acionado quando a página é carregada e quando movo o mapa. No seu mapa, é apenas inconsistente ou nunca funciona?
317 Chris B
Não, apenas não. "tilesloaded", como diz, será acionado toda vez que novos blocos forem carregados, o que significa que não será acionado apenas no primeiro carregamento, mas também sempre que você arrastar o mapa para o local onde seus blocos ainda não foram carregados.
Aivus
Depende se você usa addListener () ou addListenerOnce (). Você está certo sobre addListener () - é por isso que eu usogoogle.maps.event.addListenerOnce(map, 'tilesloaded', function() {
vchrizz 06/01

Respostas:

608

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.

ddinchev
fonte
15
É acionado quando o mapa entra no estado ocioso (nada mais será carregado). Às vezes, pode haver alguns blocos que não foram carregados devido a uma conexão incorreta; mesmo que haja peças ausentes, ele disparará o evento inativo no final. Se você precisar garantir que o mapa esteja completo, sem peças faltando, etc., procure outra maneira (por exemplo, evento "tilesloaded").
precisa saber é
15
ele não está funcionando para mim .. gatilhos antes dos shows qualquer coisa no meu mapa
zsitro
16
-1: Dispara antes que as peças sejam carregadas / exibidas.
Zbr 27/12
11
-1: para mim no chrome e no firefox, ele é acionado consistentemente assim que o script é carregado, mas antes de qualquer bloco aparecer. Talvez não seja aparente em uma conexão rápida, mas sou abençoado com uma conexão muito lenta. 'tilesloaded' parece funcionar.
Xananax
1
Obrigado por essa solução - acho que é exatamente isso que eu precisava. O que eu simplesmente não consigo entender, é por que diabos o Google não colocou um gancho pronto e simples? : -O
hasse
55

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
    });
});
Pyry Liukas
fonte
4
A primeira função carregada em mosaico funciona bem para mim, mas a segunda função carregada em mosaico nunca é executada para mim.
28315 Ganso
Estou recebendo Uncaught ReferenceError: map is not defined. Eu tentei executar o script com um atraso e no final dos meus outros scripts, mas nada parece funcionar.
Sam Willis
1
se você estiver definindo manipuladores de eventos dentro de manipuladores, terá um mau momento. Gostaria de sugerir que você não fizer isso, aqui está uma alternativa um pouco menos hacky que atinge uma coisa semelhante: gist.github.com/cmawhorter/a1b0b6a6b73678b97920f748ebca244b
Cory Mawhorter
15

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 :-)

timbo
fonte
2
Não estou achando isso funcionando para mim de maneira tão confiável quanto a procura do tilesloadedevento.
TMC
9

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

map.addEventListener('google-map-ready', function(e) {
   alert('Map loaded!');
});
Phillip Senn
fonte
3
Comentário terrível, está errado em tantos níveis, não sei por onde começar.
noites
1
Por que você diz "Comentário terrível, está errado em tantos níveis que não sei por onde começar"?
Phillip Senn
3
Mas por que fornecer uma solução usando uma estrutura diferente do que apenas o Google Maps?
noites
Porque é melhor, talvez?
Phillip Senn
HAHAHAHA @nights
Juan
5

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

Veja GMap2.tilesloaded para referências.

Adam Markowitz
fonte
Eu li muito sobre o evento tilesloaded () e parece que ele é extremamente inconsistente quando é acionado. Alguma outra opção?
3

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

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

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
});
Bala
fonte
-4

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.

fbuchinger
fonte