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.

Deja un comentario

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