Auto-center map with multiple markers in Google Maps API v3

Question

This is what I use to display a map with 3 pins/markers:

<script>   function initialize() {     var locations = [       ['DESCRIPTION', 41.926979, 12.517385, 3],       ['DESCRIPTION', 41.914873, 12.506486, 2],       ['DESCRIPTION', 41.918574, 12.507201, 1]     ];      var map = new google.maps.Map(document.getElementById('map'), {       zoom: 15,       center: new google.maps.LatLng(41.923, 12.513),       mapTypeId: google.maps.MapTypeId.ROADMAP     });      var infowindow = new google.maps.InfoWindow();      var marker, i;      for (i = 0; i < locations.length; i++) {       marker = new google.maps.Marker({         position: new google.maps.LatLng(locations[i][1], locations[i][2]),         map: map       });        google.maps.event.addListener(marker, 'click', (function(marker, i) {         return function() {           infowindow.setContent(locations[i][0]);           infowindow.open(map, marker);         }       })(marker, i));     }   }    function loadScript() {     var script = document.createElement('script');     script.type = 'text/javascript';     script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';     document.body.appendChild(script);   }    window.onload = loadScript; </script>  <div id="map" style="width: 900px; height: 700px;"></div> 

What I’m looking for is a way to avoid having to “manually” find the center of the map with center: new google.maps.LatLng(41.923, 12.513). Is there a way to automatically have the map centered on the three coordinates?

Answer 1

There's an easier way, by extending an empty LatLngBounds rather than creating one explicitly from two points. (See this question for more details)

Should look something like this, added to your code:

//create empty LatLngBounds object var bounds = new google.maps.LatLngBounds(); var infowindow = new google.maps.InfoWindow();      for (i = 0; i < locations.length; i++) {     var marker = new google.maps.Marker({     position: new google.maps.LatLng(locations[i][1], locations[i][2]),     map: map   });    //extend the bounds to include each marker's position   bounds.extend(marker.position);    google.maps.event.addListener(marker, 'click', (function(marker, i) {     return function() {       infowindow.setContent(locations[i][0]);       infowindow.open(map, marker);     }   })(marker, i)); }  //now fit the map to the newly inclusive bounds map.fitBounds(bounds);  //(optional) restore the zoom level after the map is done scaling var listener = google.maps.event.addListener(map, "idle", function () {     map.setZoom(3);     google.maps.event.removeListener(listener); }); 

This way, you can use an arbitrary number of points, and don't need to know the order beforehand.

Demo jsFiddle here: http://jsfiddle.net/x5R63/