57 votos

Google Maps Api v3 - getBounds no está definido

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

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

Así que ahora me alerta de que gMap.getBounds() está indefinido.

He intentado obtener los valores de getBounds en el evento de click y me funciona bien, pero no puedo obtener los mismos resultados en el evento de carga de mapa.

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

¿Podría ayudarme a resolver este problema?

94voto

Daniel Vassallo Puntos 142049

En los primeros días de la API de la v3, la getBounds() El método requería que los mosaicos del mapa terminaran de cargarse para que devolviera los resultados correctos. Sin embargo, ahora parece que puedes escuchar bounds_changed que se dispara incluso antes de la tilesloaded evento:

<!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>

17voto

Salman A Puntos 60620

Debería funcionar, al menos según 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 funcionar aquí .

13voto

treznik Puntos 2514

Estaba diciendo que la solución de Salman es mejor porque la idle se llama evento antes de que el tilesloaded uno, ya que espera a que se carguen todos los azulejos. Pero en una mirada más cercana, parece bounds_changed se llama aún más temprano y también tiene más sentido, ya que estás buscando los límites, ¿verdad? :)

Así que mi solución sería:

google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
    alert(this.getBounds());
});

8voto

Almer Puntos 121

En otros comentarios aquí, se aconseja usar el evento "bounds_changed" en lugar de "idle", con lo que estoy de acuerdo. Ciertamente bajo IE8 que activa "idle" antes de "bounds_changed" en mi máquina de desarrollo al menos, dejándome con una referencia a null on getBounds.

El evento "bounds_changed" sin embargo, se activará continuamente cuando arrastres el mapa. Por lo tanto, si quieres usar este evento para empezar a cargar marcadores, será pesado para tu servidor web.

Mi solución multi navegador para este problema:

google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
   loadMyMarkers();
   google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});

1voto

Fernando Puntos 2927

Bueno, no estoy seguro de si llego demasiado tarde, pero aquí está mi solución usando gmaps.JS plugin:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X