Resize Google map to match marker group

Question

I am using the google maps version of V3 and wondering how to do this. I have an array google.maps.Markers with LatLng positions set.

I would like to go through the array and find the latitude and longitude values ​​of the min / max markers, as well as center and resize the map so that all the markers fit on the screen with a small coefficient of fiction.

Looping with an array of markers that I can handle, but I'm not sure how to adjust the centering and resizing of the map to fit all (with a small border area, so the markers do not match the edge).

I'm not sure if this helps or matters, but the <div> card lives in 320x200 pixels.

Answer 1

You can create a function like

 function setBounds() { var bounds = new google.maps.LatLngBounds(); for (var i=0; i < markersArray.length; i++) { bounds.extend(markersArray[i].getPosition()); } map.fitBounds(bounds); } 

Just!

Answer 2

See google.maps.Map fitBounds method

Add all the positions of your markers to the empty google.maps.LatLngBounds object, then type fitBounds on it.

 var bounds = new google.maps.LatLngBounds(); for (var i=0; i < yourArrayOfMarkers.length; i++) { bounds.extend(yourArrayOfMarkers[i].getPosition(); } yourMap.fitBounds(bounds);