Google maps API V3 method fitBounds()

Question

I have this code that renders a map.

function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(45.4555729, 9.169236),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,

panControl: true,
mapTypeControl: false,
panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.RIGHT_CENTER
},
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {
    position: google.maps.ControlPosition.RIGHT_CENTER
            }
        };
    var map = new google.maps.Map(document.getElementById("mapCanvas"),
        myOptions);



var Item_1 = new google.maps.LatLng(45.5983128 ,8.9172776);

var myPlace = new google.maps.LatLng(45.4555729, 9.169236);

var marker = new google.maps.Marker({
    position: Item_1, 
    map: map});

var marker = new google.maps.Marker({
    position: myPlace, 
    map: map});

var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
map.fitBounds(bounds);

    }

Even if the two points are separated from 25 km I get this result:

enter image description here

While I would like to render a higher level zoom.

Like this

enter image description here

I use the method fitBounds()

    var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
    map.fitBounds(bounds);

Thanks for your support

Gabriele Petrioli · Accepted Answer · 2012-04-22T13:10:01.753

167

This happens because LatLngBounds() does not take two arbitrary points as parameters, but SW and NE points

use the .extend() method on an empty bounds object

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);

Demo at http://jsfiddle.net/gaby/22qte/

edited Apr 22 '12 at 13:10

answered Apr 22 '12 at 13:03

Gabriele Petrioli

191,379
34
261
317

1

Correct answer. Need to pass SW and NE points to the extend method. However, the fitBounds method should be called once the map is fully loaded, as vanthome answer below: google.maps.event.addListenerOnce(map, 'idle', function() { map.fitBounds(markerBounds); }); You may want to also pass padding=0 to fitBounds like this: map.fitBounds(markerBounds, 0); – tala9999 Mar 30 '18 at 13:49

score 33 · Answer 2 · answered Apr 22 '12 at 13:05

33

LatLngBounds must be defined with points in (south-west, north-east) order. Your points are not in that order.

The general fix, especially if you don't know the points will definitely be in that order, is to extend an empty bounds:

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);

The API will sort out the bounds.

answered Apr 22 '12 at 13:05

Andrew Leach

12,945
1
40
47

10

Hah! Just beaten to it. iPad keyboards don't make fast typing easy. – Andrew Leach Apr 22 '12 at 13:06

score 32 · Answer 3 · edited Sep 10 '14 at 13:32

32

I have the same problem that you describe although I'm building up my LatLngBounds as proposed by above. The problem is that things are async and calling map.fitBounds() at the wrong time may leave you with a result like in the Q. The best way I found is to place the call in an idle handler like this:

google.maps.event.addListenerOnce(map, 'idle', function() {
    map.fitBounds(markerBounds);
});

edited Sep 10 '14 at 13:32

GNi33

4,459
2
31
44

answered Jan 16 '14 at 08:53

vanthome

4,816
37
44

1

Thanks, this was a huge help for me because I was geocoding addresses to coords, and then mapping to those coords, but it wasn't working – andrewtweber Mar 03 '14 at 07:31
3

I've encountered a similar problem due to the containing HTML not being displayed yet while calling `fitBounds()`, so apparently the zooming couldn't figure itself out. Making sure the map was displayed first before trying to zoom it helped me. – stevo Jul 29 '15 at 23:24
Thanks a lot, you save me, this works perfectly, this answer is correct for my case. – Mauricio Trinidad Feb 23 '17 at 16:39
you are a life saver – Zorox Sep 04 '19 at 22:12

score 11 · Answer 4 · answered Jun 04 '16 at 09:22

11

 var map = new google.maps.Map(document.getElementById("map"),{
                mapTypeId: google.maps.MapTypeId.ROADMAP

            });
var bounds = new google.maps.LatLngBounds();

for (i = 0; i < locations.length; i++){
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
bounds.extend(marker.position);
}
map.fitBounds(bounds);

answered Jun 04 '16 at 09:22

Mourad MAMASSI

849
1
11
14

For me, I had to change from `bounds.extend(marker)` to `bounds.extend(marker.position)`. Thanks – krummens Jun 23 '20 at 22:39

Google maps API V3 method fitBounds()

4 Answers4

Linked

Related