web-dev-qa-db-fra.com

Google Maps Api v3 - getBounds n'est pas défini

Je passe de v2 à v3 google maps api et j'ai un problème avec la fonction gMap.getBounds().

J'ai besoin d'obtenir les limites de ma carte après son initialisation.

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

Alors maintenant, il m'avertit que gMap.getBounds() n'est pas défini.

J'ai essayé d'obtenir des valeurs getBounds dans l'événement click et cela fonctionne bien pour moi, mais je ne peux pas obtenir les mêmes résultats dans l'événement map de chargement.

GetBounds fonctionne également correctement pendant le chargement du document dans Google Maps API v2, mais il échoue dans V3.

Pourriez-vous s'il vous plaît m'aider à résoudre ce problème?

javascriptgoogle-mapsgoogle-maps-api-3
80
DolceVita

Dans les premiers jours de l'API v3, la méthode getBounds() exigeait que les tuiles de carte aient fini de se charger pour qu'elle renvoie des résultats corrects. Cependant, il semble maintenant que vous puissiez écouter bounds_changed événement, qui est déclenché avant même l'événement tilesloaded:

<!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>
130
Daniel Vassallo

Cela devrait fonctionner, au moins selon la documentation de getBounds (). Cependant:

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

Voir le fonctionnement ici .

20
Salman A

Je disais que la solution de Salman est meilleure car l'événement idle est appelé plus tôt que celui tilesloaded, car il attend que toutes les tuiles soient chargées. Mais à y regarder de plus près, il semble bounds_changed est appelé encore plus tôt et il a également plus de sens, puisque vous recherchez les limites, non? :)

Ma solution serait donc:

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

Dans d'autres commentaires ici, il est conseillé d'utiliser l'événement "bounds_changed" sur "idle", avec lequel je suis d'accord. Certainement sous IE8 qui déclenche "idle" avant "bounds_changed" sur ma machine de développement au moins, me laissant une référence à null sur getBounds.

L'événement "bounds_changed" sera cependant déclenché en continu lorsque vous ferez glisser la carte. Par conséquent, si vous souhaitez utiliser cet événement pour démarrer le chargement des marqueurs, il sera lourd sur votre serveur Web.

Ma solution multi-navigateur à ce problème:

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

Eh bien, je ne sais pas si je suis trop tard, mais voici ma solution en utilisant 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();
1
Fernando