How to set zoom to fit circle in Google Maps

Question

We have distance search filter. It has a map viewport that allow to set base marker and a input text box that allows enter distance in kilometers.

We then add a circle to show this distance on the map.

How can I zoom the map so it fits the circle?

Answer 1

A google.maps.Circle has a getBounds() method which returns the LatLngBounds of the circle. You may use this bounds as argument for google.maps.Map.fitBounds()

If using a circle, you can do this:

map.fitBounds(circle.getBounds());

...at the end of the init-function.

http://jsfiddle.net/doktormolle/MHLjy/

Answer 2

For multiple circles use union instead of extend:

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

$.each(circles, function(index, circle){
    bounds.union(circle.getBounds());
});

map.fitBounds(bounds);