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

Asked 17/8, 2010 at 19:10 Answered 23/7, 2013 at 0:34

Solved javascript google-maps google-maps-api-3 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.

Dragone answered 17/8, 2010 at 19:10 Comment(0)

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

Lewis answered 17/8, 2010 at 21:23 Comment(0)

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).

Emelina answered 18/8, 2010 at 9:9 Comment(1)

you should use addListenerOnce instead! – Oruntha 23/3, 2013 at 9:25

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

Lewis answered 17/8, 2010 at 21:23 Comment(0)

Use addListenerOnce when tilesloaded

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){ 
map.setCenter(myLatLngBounds)
});

Smoko answered 23/7, 2013 at 0:34 Comment(1)

Thanks this saved me. I was using fitbounds slightly before tiles had finished loading and getting an intermittent grey blank map screen with no tiles. – Attain 4/2, 2023 at 23:51

-1

The answer is in your own quote. You have to set the center and zoom for the map to be initialized.

Note that in the docs for the MapOptions object specification, the values of center and zoom are marked as required:

http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

Jannajannel answered 18/8, 2010 at 4:23 Comment(3)

That doesn't resolve the issue - I've updated the code as per your suggestion. – Dragone 18/8, 2010 at 9:15

In the code you posted, you're missing a comma after mapTypeId:google.maps.MapTypeId.ROADMAP The map MUST be initialized with center and zoom. – Jannajannel 18/8, 2010 at 9:19

Yeah - that was a typo when I updated the code in the question. If you actually run the correct code, the behaviour is unchanged. – Dragone 18/8, 2010 at 11:20

Recommended topics

Hot tags