Center/Set Zoom of Map to cover all visible Markers?

Question

I am setting multiple markers on my map and I can set statically the zoom levels and the center but what I want is, to cover all the markers and zoom as much as possible having all markets visible

Available methods are following

setZoom(zoom:number)

and

setCenter(latlng:LatLng)

Neither setCenter supports multiple location or Location array input nor setZoom does have this type of functionality

Answer 1

You need to use the fitBounds() method.

var markers = [];//some array var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markers.length; i++) {  bounds.extend(markers[i]); }  map.fitBounds(bounds); 

---

Documentation from developers.google.com/maps/documentation/javascript:

fitBounds(bounds[, padding])

Parameters:

`bounds`:  [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1] `padding` (optional):  number|[`Padding`][1] 

Return Value: None

Sets the viewport to contain the given bounds.
Note: When the map is set to display: none, the fitBounds function reads the map's size as 0x0, and therefore does not do anything. To change the viewport while the map is hidden, set the map to visibility: hidden, thereby ensuring the map div has an actual size.