Google Maps fitBounds not applying padding when only one point

Question

I'm using Google Maps Javascript API.

Everytime the user search for some place, I show the marker of each place in my map and I use fitBounds to set the viewport to contain the given bounds.

As I have a panel above the map of 400px width on the right side, I apply a 400px of right padding in the fitBounds.

var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(lat, lng)); //this line is executed inside a loop for every place
map.fitBounds(bounds, {right: 400});

When I have multiple points inside the bounds, the fitBounds works great applying the padding. But when I have only one point inside the bounds, the fitBounds does not apply the padding. Instead of that it works like panTo, only changing the center of the map.

Is that a bug in Google Maps API? Is there any workaround?

score 3 · Accepted Answer · edited Sep 05 '19 at 12:27

3

That seems to be a bug on the API, you can report it here.

A workaround for the problem is using the panBy method when there is only one point after calling the fitBounds method, like in this fiddle.

var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(lat, lng)); //this line is executed inside a loop for every place
map.fitBounds(bounds, {right: 400});
if (pointsCount == 1) { // initialize the var and use the loop to count
    map.panBy(200, 0); // has to be half of needed padding
}

edited Sep 05 '19 at 12:27

SAS

3,943
2
27
48

answered Aug 16 '19 at 13:41

Claudio

5,078
1
22
33

Yeap it seems to be a bug. I reported it [here](https://issuetracker.google.com/issues/139464498). That `panBy` workaround really works for me, thanks. – Pedro Estevão Sep 05 '19 at 11:47

Google Maps fitBounds not applying padding when only one point

1 Answers1