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




mark location google map javascript example (6)

Em 2018:

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

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

Estou incorporando o Google Maps no meu site. Depois que o Google Maps for 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 mais?

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


Estou criando aplicativos móveis html5 e notei que os eventos idle , bounds_changed e tilesloaded disparados quando o objeto de mapa é criado e renderizado (mesmo que não esteja visível).

Para fazer o meu mapa executar o código quando ele é exibido 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
    });
});

No meu caso, o Tile Image carregado do evento remote url e tilesloaded foi acionado antes de renderizar a imagem.

Eu resolvi seguindo o 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
});

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

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

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

Na versão 3, você deseja essencialmente configurar um ouvinte para o evento bounds_changed , que será acionado no carregamento do mapa. Uma vez que isso tenha sido acionado, remova o ouvinte, pois você não quer ser informado toda vez que os limites da porta de visualização mudarem.

Isso pode mudar no futuro, já que a API V3 está evoluindo :-)


Você poderia verificar o método GMap2.isLoaded() cada n milissegundos 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 da carga, ele deve ser bom o suficiente para acionar seu JavaScript.





google-maps