Zoom in when radius is changed in editable circle

1,542 views
Skip to first unread message

Chandan

unread,
Jun 10, 2017, 12:02:16 AM6/10/17
to Google Maps JavaScript API v3
Hi,
I need to zoom in when radius is reduced and zoom out when radius is increased in editable circles using Google maps API.

I used map.fitbounds(circle.getbounds()) but this worked for particular radius change. But I need to zoom in and out for every radius change.
For example: radius is 200km, when radius reduced - zoom in and when radius increased - zoom out

Rob

unread,
Jan 2, 2018, 5:10:52 AM1/2/18
to Google Maps JavaScript API v3
Hi Chandan,

You mention that the fitbounds(...) worked for " particular radius change", and I presume you mean that it worked only sometimes, and not always. My guess is that it only worked when that radius was INCREASED, thus necessitating a zoom out. If I'm right, then the trick is to always do the following:

// ...user changes radius...
var bounds = circle.getbounds();
// Set zoom to max possible
map
.setZoom(20);   // 19 or 20 or get the maxZoom property of your MapOptions
map
.fitBounds(bounds);
map
.panToBounds(bounds);

This is because the API, for some reason, can't zoom in when fitting bounds, but can only zoom out. So, zoom to max, then do your fitBounds, etc., which will (should!) then bring you to the correct zoom level for the new circle radius.

HTH,
Rob
Reply all
Reply to author
Forward
0 new messages