Blog
En el anterior tutorial hemos visto cómo ver información de un marker en Google Maps a través de una ventana, en este aprenderemos a trazar rutas en Google Maps utilizando el objeto Polyline con un ejemplo muy sencillo.
¿Cómo trazar rutas en Google Maps?
Para realizar esta tarea vamos a utilizar el objeto Polyline que nos ofrece Google Maps. Con el objeto mencionado podemos definir las coordenadas y el color de la línea de la ruta, entre otras cosas interesantes. A continuación el ejemplo completo:
<!DOCTYPE html>
<html style="height:100%">
<head>
<title>Trazar rutas en Google Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body{
height:100%;
margin: 0px;
}
#googleMap{
width:100%;
height:100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
// Configuración del mapa
var mapProp = {
zoom: 3,
center: {lat: -34.6036844, lng: -58.381559100000004},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// Agregando el mapa al tag de id googleMap
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
// Coordenada de la ruta (desde Misiones hasta Tierra del Fuego)
var flightPlanCoordinates = [
{lat: -27.4269255, lng: -55.94670759999997},
{lat: -34.6036844, lng: -58.381559100000004},
{lat: -43.2934246, lng: -65.11148179999998},
{lat: -54.8053998, lng: -68.32420609999997}
];
// Información de la ruta (coordenadas, color de línea, etc...)
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
// Creando la ruta en el mapa
flightPath.setMap(map);
}
// Inicializando el mapa cuando se carga la página
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>
Al ejecutar la página anterior en nuestros navegadores el resultado tendría que ser el siguiente.
Bueno gente, espero que les sea de gran interés este tutorial. Ante cualquier problema no duden en dejar un comentario.
Gracias por la Info José Di Meglio funcionó correctamente, abusando de tu confianza, sabes si hay alguna manera para resaltar los puntos intermedios por donde cruza la ruta? de antemano gracias!
Hola Daniel, es un placer saber que te ha servido el código. En cuanto a lo que queres hacer con los puntos intermedios es totalmente posible, si queres resaltar con otro color la ruta intermedia solamente tenes crear un nuevo polígono con los mismo puntos que los anteriores (menos el primero y el último), por ejemplo el código sería algo así:
newFlightPlanCoordinates = []; // Filtrando el primero y el último punto for (i = 0; i < flightPlanCoordinates.length; i++) { if (i != 0 && i != flightPlanCoordinates.length - 1) { newFlightPlanCoordinates.push(flightPlanCoordinates[i]); } } // Nuevo estilo para el camino intermedio var flightPath = new google.maps.Polyline({ path: newFlightPlanCoordinates, geodesic: true, strokeColor: 'blue', strokeOpacity: 2.0, strokeWeight: 2 }); flightPath.setMap(map);Solamente tenes que agregar ese código al final del que ya tenias. Ahora si lo que queres es agregar markers, el código es todavía más sencillo:
for (i = 0; i < flightPlanCoordinates.length; i++) { if (i != 0 && i != flightPlanCoordinates.length - 1) { var marker = new google.maps.Marker({ position: flightPlanCoordinates[i], map: map }); } }Cómo podría hacerlo obteniendo las coordenadas desde una base de datos?
Hola Moises, básicamente primero tenes que obtener esas coordenadas desde la base de datos, eso lo podes hacer solamente desde el servidor. Recordá que Java Script se ejecuta en el cliente.
Buenas, y si quiero marcar la ruta o sea la carretera para llegar al destino, cómo le haría?
Hola Manuel, tal vez te puede servir esto que está en la documentación oficial de Google Maps: https://developers.google.com/maps/documentation/javascript/directions