Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps map.getBounds() immediately after a call to map.fitBounds

I'm calling getBounds() directly after a call to fitBounds(), and I thought I'd get a valid bound back as the map recenters and zooms to fit the bounds. Unfortunately, getBounds() is returning nil.

The code to reproduce this is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

        <style>
            #map {
                width: 800px;
                height: 400px;
            }
        </style>

    </head>
    <body>
        <div id='map'></div>

        <script>
            var myLatlng1 = new google.maps.LatLng(-38.397, 150.644);
            var myLatlng2 = new google.maps.LatLng(-34.897, 150.844);
            var myLatLngBounds = new google.maps.LatLngBounds(myLatlng1, myLatlng2);

            var myOptions = {
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  center: new google.maps.LatLng(0, 0),
                  zoom: 0
            }

            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            map.fitBounds(myLatLngBounds);

            console.log(map.getMapTypeId());
            console.log(map.getZoom());
            console.log(map.getBounds());
        </script>
    </body>
</html>

Is there something I'm missing? I haven't been able to find anything in the docs about this situation. The nearest I get is a note on getBounds that says:

If the map is not yet initialized (i.e. the mapType is still null), or center and zoom have not been set then the result is null.

Note that getZoom returns undefined, too. Does fitBounds() not set this value?

EDIT I've updated the code with a default zoom and center, as per Marcelo's suggestions.

like image 364
Codebeef Avatar asked Aug 17 '10 19:08

Codebeef


2 Answers

As @CrazyEnigma suggested, you can get the bounds after the bounds_changed event is triggered:

map.fitBounds(myLatLngBounds);

google.maps.event.addListener(map, 'bounds_changed', function() {
  console.log(map.getMapTypeId());
  console.log(map.getZoom());
  console.log(map.getBounds());
});

The above would print the following to your console:

roadmap
6
Object

Note that if you only want to getBounds and do something once, you should replace addListener with addListenerOnce (Thanks, @Tomas).

like image 71
Daniel Vassallo Avatar answered Sep 30 '22 05:09

Daniel Vassallo


You will have to get the bounds after the bounds_changed event.

like image 38
CrazyEnigma Avatar answered Sep 30 '22 06:09

CrazyEnigma