javascript - puntos - ¿Cómo establecer el nivel de zoom de Google Map para mostrar todos los marcadores?
marcadores multiples desde una base de datos en google maps (4)
establecer el nivel de zoom de Google Map para mostrar todos los marcadores?
Maps API v3
- obtener marcadores
- obtener límites de marcadores
- establecer el centro en el mapa ajustándolo a los límites del marcador
var markers = [markerObj1, markerObj2, markerObj3];
var newBoundary = new google.maps.LatLngBounds();
for(index in markers){
var position = markers[index].position;
newBoundary.extend(position);
}
map.fitBounds(newBoundary);
El código de arriba centrará automáticamente y hará zoom en su mapa para que todos los marcadores estén visibles.
¿Cómo configuro el nivel de zoom para mostrar todos los marcadores en Google Maps?
En mi Google Map hay diferentes marcadores en diferentes posiciones. Quiero establecer el nivel de zoom del mapa de Google según el rango de marcadores (eso significa que en la vista del mapa de Google, quiero ver todos los marcadores)
Ahí tienes:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps getBoundsZoomLevel Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var markerBounds = new GLatLngBounds();
for (var i = 0; i < 10; i++) {
var randomPoint = new GLatLng( 39.00 + (Math.random() - 0.5) * 20,
-77.00 + (Math.random() - 0.5) * 20);
map.addOverlay(new GMarker(randomPoint));
markerBounds.extend(randomPoint);
}
map.setCenter(markerBounds.getCenter(),
map.getBoundsZoomLevel(markerBounds));
}
</script>
</body>
</html>
Estamos creando 10 puntos aleatorios en el ejemplo anterior y luego pasando cada punto a GLatLngBounds.extend() . Finalmente obtenemos el nivel de zoom correcto con GMap2.getBoundsZoomLevel() .
Puede usar el método GLatLngBounds objeto GLatLngBounds , que representa un rectángulo en el mapa.
var bounds = new GLatLngBounds();
Haz un bucle alrededor de todos los points en tu mapa, ampliando los límites de tu objeto GLatLngBounds para cada uno.
bounds.extend(myPoint);
Finalmente puede usar su objeto de límites para establecer el centro y el zoom de su mapa (donde el map es su objeto de mapa)
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
Si está utilizando API versión 3 puede reemplazar
map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));
con
map.fitBounds(markerBounds).