getBounds() w Google Maps API v3

Jeśli musisz znać szerokości i długości narożników dla widocznego obszaru mapy google, prawdopodobnie użyjesz czegoś takiego jak getBounds();

W Google Maps Api v2, aby je uzyskać napisałbyś coś takiego:

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();

Jednak w API v3 otrzymasz błąd: “bounds is undefined”.

Aby uzyskać szerokości i długość należy przenieść getBounds() do event listenera.

Najczęściej zapewne będzie to bounds_changed:

<script type="text/javascript"> 
         var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                center: new google.maps.LatLng(lat, lng),
                mapTypeId: google.maps.MapTypeId.ROADMAP
         });
         google.maps.event.addListener(map, 'bounds_changed', function() {
                var bounds = map.getBounds();
                var ne = bounds.getNorthEast();
                var sw = bounds.getSouthWest();
                //zrób cokolwiek z uzyskanymi danymi
         });
</script>

Opis zdarzenia bounds_changed w dokumentacji to mniej więcej: “Zdarzenie wywoływane jest kiedy granice widocznego obszaru uległy zmianie.“

Wydaje się, że jest to najlepszy moment aby uzyskać te granice. Jednak jeśli chcesz wykonać jeszcze w tym ajaxowe zapytanie, to za każdym razem gdy widok, pozycja mapy się zmieni to zapytanie będzie wywoływane. W większości przypadków nie ma potrzeby go wywoływać dopóki nie będzie finalnego widoku mapy.

Myślę, że lepszym rozwiązaniem będzie użycie zdarzenia “idle”. W szczególności jeśli chcemy jeszcze wykonać zapytanie ajaxowe. Opis: “Zdarzenie wywoływane jest kiedy mapa staje się nieaktywna/bezczynna po przesuwaniu lub zoomowaniu.” Tak więc mój kod wygląda następująco:

<script type="text/javascript">
         var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                 center: new google.maps.LatLng(lat, lng),
                 mapTypeId: google.maps.MapTypeId.ROADMAP
         });
         google.maps.event.addListener(map, 'idle', function() {
                var bounds = map.getBounds();
                var ne = bounds.getNorthEast();
                var sw = bounds.getSouthWest();
                //zrób cokolwiek z uzyskanymi danymi
         });
</script>

Jednak możesz wybrać zdarzenie które będzie pasowało do Twoich potrzeb, nie moich ;o) Wystarczy że przeczytasz ich opis w dokumentacji na temat google.maps.Map class – sekcja events i zdecydujesz, które z nich jest najlepsze dla Ciebie.