Angular Google Maps - automatically set 'center' and 'zoom' to fit in all markers

Question

I have a dynamically generated list of markers within my Google Map. I want the map\'s center to be the center of all the markers and zoomed out just enough so that all markers

Answer 1

Use the LatLngBounds class in Google Maps API, like this:

var bounds = new google.maps.LatLngBounds();
for (var i in markers) // your marker list here
    bounds.extend(markers[i].position) // your marker position, must be a LatLng instance

map.fitBounds(bounds); // map should be your map class

It will nicely zoom and center the map to fit all your markers.

Of course, this is the pure javascript, not the angular version, so if you have problems implementing it in angular (or you don't have access to the map instance from where you get the markers), let me know.