Mapa autocentrado con múltiples marcadores en Google Maps API v3

Nuestros desarrolladores estrellas agotaron sus reservas de café, en su búsqueda todo el tiempo por la respuesta, hasta que Gabriel encontró el arreglo en Bitbucket y hoy la compartimos contigo.

Solución:

Hay una manera más fácil, extendiendo un vacío LatLngBounds en lugar de crear uno explícitamente a partir de dos puntos. (Ver esta pregunta para más detalles)

Debería verse algo como esto, agregado a su código:

//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);
);

De esta manera, puede usar un número arbitrario de puntos y no necesita saber el orden de antemano.

Demostración jsFiddle aquí: http://jsfiddle.net/x5R63/

Creo que tienes que calcular la latitud min y la longitud min: aquí hay un ejemplo con la función que usarás para centrar tu punto:

//Example values of min & max latlng values
var lat_min = 1.3049337;
var lat_max = 1.3053515;
var lng_min = 103.2103116;
var lng_max = 103.8400188;

map.setCenter(new google.maps.LatLng(
  ((lat_max + lat_min) / 2.0),
  ((lng_max + lng_min) / 2.0)
));
map.fitBounds(new google.maps.LatLngBounds(
  //bottom left
  new google.maps.LatLng(lat_min, lng_min),
  //top right
  new google.maps.LatLng(lat_max, lng_max)
));

Reseñas y valoraciones

Si haces scroll puedes encontrar las ilustraciones de otros creadores, tú además eres capaz mostrar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador