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-22 13:10:01Z

171

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, 2012 at 13:10

answered Apr 22, 2012 at 13:03

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tala9999 Over a year ago

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

Andrew Leach · Accepted Answer · 2012-04-22 13:05:39Z

35

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, 2012 at 13:05

Andrew Leach

13k1 gold badge44 silver badges48 bronze badges

1 Comment

Andrew Leach Over a year ago

Hah! Just beaten to it. iPad keyboards don't make fast typing easy.

GNi33 · Accepted Answer · 2014-09-10 13:32:14Z

34

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, 2014 at 13:32

GNi33

4,5092 gold badges33 silver badges45 bronze badges

answered Jan 16, 2014 at 8:53

vanthome

4,94240 silver badges46 bronze badges

4 Comments

andrewtweber Over a year ago

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

stevo Over a year ago

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.

Mauricio Trinidad Over a year ago

Thanks a lot, you save me, this works perfectly, this answer is correct for my case.

Zorox Over a year ago

you are a life saver

Mourad MAMASSI · Accepted Answer · 2016-06-04 09:22:06Z

13

 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 4, 2016 at 9:22

Mourad MAMASSI

8851 gold badge12 silver badges15 bronze badges

1 Comment

krummens Over a year ago

For me, I had to change from bounds.extend(marker) to bounds.extend(marker.position). Thanks

Collectives™ on Stack Overflow

Google maps API V3 method fitBounds()

4 Answers 4

1 Comment

1 Comment

4 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

4 Comments

1 Comment

Linked

Related