Google Maps Api v3 - getBounds é indefinido

83

Estou mudando de v2 para v3 google maps api e tenho um problema com a gMap.getBounds()função.

Preciso obter os limites do meu mapa após sua inicialização.

Aqui está meu código javascript:


var gMap;
$(document).ready(

    function() {

        var latlng = new google.maps.LatLng(55.755327, 37.622166);
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);

        alert(gMap.getBounds());
    }
);

Então agora ele me alerta que gMap.getBounds()está indefinido.

Tentei obter valores getBounds no evento click e funciona bem para mim, mas não consigo obter os mesmos resultados no evento load map.

Além disso, getBounds funciona bem durante o carregamento do documento na API do Google Maps v2, mas falha na V3.

Você poderia me ajudar a resolver este problema?

javascript google-maps google-maps-api-3 DolceVita
fonte

Respostas:

136

Nos primeiros dias da API v3, o getBounds()método exigia que os blocos do mapa terminassem de carregar para retornar os resultados corretos. No entanto, agora parece que você pode ouvir o bounds_changedevento, que é disparado antes mesmo do tilesloadedevento:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps v3 - getBounds is undefined</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px;"></div> 

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: new google.maps.LatLng(55.755327, 37.622166),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      google.maps.event.addListener(map, 'bounds_changed', function() {
         alert(map.getBounds());
      });
   </script> 
</body> 
</html>
Daniel Vassallo
fonte
1
É exatamente disso que preciso! obrigado =). Isso resolveu meu problema.
DolceVita
isso é muito útil para mim, eu quase perdi 2 horas com isso
arjuncc
Obrigado! Isso me ajudou muito
usuário
Isso também pode ser útil stackoverflow.com/questions/832692/…
dia
1
Pelo que vale a pena, descobri que, em telefones Android, getBounds não está disponível após a primeira chamada para bounds_changed, mas está após as subsequentes. Mudar para tilesloaded corrigiu isso (embora tenha sido feito para algumas atualizações feias).
Chris Rae
20

Ele deve estar funcionando, pelo menos de acordo com a documentação de getBounds (). Mesmo assim:

var gMap;
$(document).ready(function() {
    var latlng = new google.maps.LatLng(55.755327, 37.622166);
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);
    google.maps.event.addListenerOnce(gMap, 'idle', function(){
        alert(this.getBounds());
    });
});

Veja funcionando aqui .

Salman A
fonte
Esta deve ser a resposta aceita. ocioso está sendo chamado muito antes de ter que esperar que todos os blocos sejam carregados.
treznik
@treznik: Como você determinou que o idleevento seja disparado antes do tilesloadedevento? Para mim, o tilesloadedevento dispara constantemente antes do idleevento.
Daniel Vassallo,
isto é exatamente o que eu estava procurando
arjuncc
Esta é a melhor solução se você precisar que a função seja executada apenas uma vez.
bbodenmiller
15

Eu estava dizendo que a solução do Salman é melhor porque o idleevento é chamado antes do tilesloadedprimeiro, pois espera que todos os tiles sejam carregados. Mas olhando mais de perto, parece que bounds_changedse chama ainda mais cedo e também faz mais sentido, já que você está procurando os limites, certo? :)

Portanto, minha solução seria:

google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
    alert(this.getBounds());
});
treznik
fonte
1
Quando esta pergunta foi feita, bounds_changednão teria funcionado, pois getBounds()exigia que os ladrilhos fossem carregados. 1 por sugerir isso. Vou atualizar minha resposta.
Daniel Vassallo,
11

Em outros comentários aqui, é aconselhável usar o evento "bounds_changed" em vez de "idle", com o qual concordo. Certamente no IE8 que dispara "idle" antes de "bounds_changed" na minha máquina dev, pelo menos, deixando-me com uma referência a null em getBounds.

O evento "bounds_changed", entretanto, será acionado continuamente quando você arrastar o mapa. Portanto, se você quiser usar este evento para começar a carregar marcadores, ele será pesado em seu servidor web.

Minha solução de vários navegadores para este problema:

google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
   loadMyMarkers();
   google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});
Almer
fonte
1
Este é o método que
utilizo
1

Bem, não tenho certeza se é tarde demais, mas aqui está minha solução usando o plug-in gmaps.js :

map = new GMaps({...});

// bounds loaded? if not try again after 0.5 sec
var check_bounds = function(){

        var ok = true;

        if (map.getBounds() === undefined)
            ok = false;

        if (! ok) 
            setTimeout(check_bounds, 500);
        else {
             //ok to query bounds here
              var bounds = map.getBounds();
        }   
    }

    //call it
    check_bounds();
Fernando
fonte