Bounds Polyline – Google Maps Api 3
En mi trabajo tienen un sistema de monitoreo por gps, las coordenadas de dicho monitoreo se plasmaban con la ayuda del Api Google Maps(V2) mediante una polilinea (polyline), pero se comenzaron a tener problemas y después de “analizarlo” se decidió cambiar el Api a la Version 3 y esa tarea me quedo a mi :S. Un tropiezo con el que me tope era en hacer un Bounds a la polyline de tal suerte que el mapa se ajustara y centrara en el trazo de la polyline.
Y ahora lo comparto con ustedes, de tal suerte que si requieres hacer un bounds o un fitBounds a una polyline con el Api de Google Maps V3 aqui esta una pequeña y simple solución.
Para explicarlo vamos a reutilizar un ejercicio que te ponen dentro de los ejemplos de la Api Google Maps V3
Este es el código del ejemplo polyline-simple.html
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0,-180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style=" float:left; width:100%; height:100%"></div>
</body>
</html>
Como pueden ver (ver Polyline Simple online) este código traza un polyline, pero no centra dicha polyline sobre el mapa.
Ejemplo 1: Fit To Polyline
Para hacer un Bounds/fitBounds a ese mismo codigo agregamos lo siguiente (lineas sombreadas).
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0,-180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var bounds = new google.maps.LatLngBounds();
var point;
for (i = 0; i < flightPlanCoordinates.length; i++) {
point = flightPlanCoordinates[i];
bounds.extend(point);
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
map.fitBounds(bounds);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style=" float:left; width:100%; height:100%"></div>
</body>
</html>
Con lo anterior veremos el mismo mapa solo que ahora un poco mas ajustado y centrado en relación a la polyline (ver Ejemplo 1 online).
Ejemplo 2: Fit To Polyline
Por si no notaron mucha diferencia en el código anterior.
En este ejercicio emplearemos el mismo código que el Ejemplo 1, solo que le daremos otras coordenadas para trazar una nueva polyline.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0,-180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(29.087077,-110.950756),
new google.maps.LatLng(19.420621,-99.139938),
new google.maps.LatLng(16.873219,-99.866753),
new google.maps.LatLng(21.144711,-86.824608)
];
var bounds = new google.maps.LatLngBounds();
var point;
for (i = 0; i < flightPlanCoordinates.length; i++) {
point = flightPlanCoordinates[i];
bounds.extend(point);
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
map.fitBounds(bounds);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style=" float:left; width:100%; height:100%"></div>
</body>
</html>
El anterior ejemplo es el mismo codigo que hemos usado solo que con distintas coordenadas(Ver Ejemplo 2 Online), esto para que sea mas facil diferenciar el cambio que se obtiene al dale un Bounds/fitBounds a la polyline.
Enlaces
Google Maps JavaScript API V3
Developer’s Guide
Google Maps Javascript API V3 Examples
Google Maps Javascript API V3 Reference
Subscribe to the RSS feed and have all new posts delivered straight to you.
[...] Guerrix пишет: <meta name=»viewport» content=»initial-scale=1.0, user-scalable=no» /> <script … [...]