Trazar ruta en Google Maps

Trazar rutas en Google Maps

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.

Trazar ruta en Google Maps

Ruta en Google Maps

Bueno gente, espero que les sea de gran interés este tutorial. Ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

2 comments

  1. 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!

    1. 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
              });
          }
      }
      

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *