Google Maps Api v3 - getBounds no está definido

83

Estoy cambiando de la api de google maps v2 a v3 y tengo un problema con la gMap.getBounds()función.

Necesito obtener los límites de mi mapa después de su inicialización.

Aquí está mi 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());
    }
);

Entonces ahora me advierte que gMap.getBounds()no está definido.

Intenté obtener valores de getBounds en el evento de clic y funciona bien para mí, pero no puedo obtener los mismos resultados en el evento de mapa de carga.

También getBounds funciona bien mientras el documento se carga en Google Maps API v2, pero falla en V3.

¿Podría ayudarme a resolver este problema?

javascript google-maps google-maps-api-3 Dulce vida
fuente

Respuestas:

136

En los primeros días de la API v3, el getBounds()método requería que los mosaicos del mapa hubieran terminado de cargarse para devolver los resultados correctos. Sin embargo, ahora parece que puede escuchar el bounds_changedevento, que se activa incluso antes del 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
fuente
1
¡Eso es exactamente lo que necesito! gracias =). Resolvió mi problema.
DolceVita
esto es muy útil para mí, casi desperdicié 2 horas en esto
arjuncc
¡Gracias! Me ayudó mucho
user15
Esto también puede ser útil stackoverflow.com/questions/832692/…
dav
1
Por lo que vale, descubrí que, en los teléfonos Android, getBounds no está disponible después de la primera llamada a limits_changed, sino después de las siguientes. Cambiarlo a mosaicos cargados solucionó eso (aunque hecho para algunas actualizaciones feas).
Chris Rae
20

Debería estar funcionando, al menos de acuerdo con la documentación de getBounds (). Sin embargo:

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

Véalo funcionando aquí .

Salman A
fuente
Esta debería ser la respuesta aceptada. inactivo se llama mucho antes de tener que esperar a que se carguen todos los mosaicos.
treznik
@treznik: ¿Cómo determinó que el idleevento se dispara antes del tilesloadedevento? Para mí, el tilesloadedevento se dispara constantemente antes del idleevento.
Daniel Vassallo
esto es exactamente lo que estaba buscando
arjuncc
Esta es la mejor solución si solo necesita que la función se ejecute una vez.
bbodenmiller
15

Decía que la solución de Salman es mejor porque el idleevento se llama antes que el anterior tilesloaded, ya que espera a que se carguen todos los mosaicos. Pero en una mirada más cercana, parece que bounds_changedse llama incluso antes y también tiene más sentido, ya que estás buscando los límites, ¿verdad? :)

Entonces mi solución sería:

google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
    alert(this.getBounds());
});
treznik
fuente
1
Cuando se hizo esta pregunta, bounds_changedno habría funcionado, ya que getBounds()requería que se cargaran los mosaicos. +1 por sugerirlo. Actualizaré mi respuesta.
Daniel Vassallo
11

En otros comentarios aquí, se recomienda usar el evento "limits_changed" en lugar de "idle", con lo que estoy de acuerdo. Ciertamente, bajo IE8 que activa "inactivo" antes de "límites_cambiados" en mi máquina de desarrollo al menos, dejándome con una referencia a nulo en getBounds.

Sin embargo, el evento "limits_changed" se activará continuamente cuando arrastre el mapa. Por lo tanto, si desea utilizar este evento para comenzar a cargar marcadores, será pesado para su servidor web.

Mi solución de navegador múltiple para este problema:

google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
   loadMyMarkers();
   google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});
Almer
fuente
1
Este es el método que empleo, por las mismas razones :-)
oodavid
1

Bueno, no estoy seguro si llegué demasiado tarde, pero aquí está mi solución usando el complemento 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
fuente