Dibujar rutas en Google Maps v3 *** codifica.me

Rutas en Google Maps

En los post anteriores hemos visto como incorporar un mapa de Google Maps en nuestra web y como introducir marcas o ítems dentro del mapa, en este artículo vamos a dibujar líneas o poli-líneas mostrando una ruta.

Línea o poli línea

Para trazar líneas o poli-líneas con los mapas tenemos que utilizar la clase “google.maps.Polyline”, que nos proporciona Google Maps en su API, las propiedades que vamos a utilizar son las siguientes:

clickable boolean: Indica si este objeto controla eventos click. Por defecto el valor es true.
map: Es el mapa en el que se va a mostrar la poli línea. El que hemos creado antes con new google.maps.Map(document.getElementById….
path: Es la secuencia ordenada de coordenadas de la poli línea. Esta ruta se puede especificar mediante un conjunto simple de LatLng o un conjunto MVCArray de LatLng. Recuerda que si transmites un conjunto simple, se convertirá en MVCArray. Si insertas o eliminas LatLng en MVCArray, se actualizará automáticamente la poli-línea en el mapa. En nuestro ejemplo hemos utilizado la variable ruta para pasarle estos valores.
strokeColor string: Contiene el color. En este ejemplo utilizamos este: “#222000”, aunque puedes poner cualquier color CSS3 salvo los nombres de colores.
strokeOpacity number: Muestra la opacidad del trazo, es decir, determina lo transparente que será la linea, los valores estarán entre 0,0 y 1,0.
strokeWeight number: Muestra la anchura del trazo.

El código que hemos utilizado es igual que el de los ejemplos anteriores, solamente hemos añadido la poli línea que hemos dibujado a través del objeto “google.maps.Polyline”.

Primero dibujamos la ruta, creamos el array ruta en el que ponemos los siguientes valores, nos quedaría así:

        var ruta = [
        new google.maps.LatLng(13.6203, 101.09),
        new google.maps.LatLng(14.6203, 101.29),
        new google.maps.LatLng(15.0203, 102.09)
    ];

Después creamos el objeto “lineas” al que le vamos a pasar los puntos que queremos que dibuje a través del array ruta, este es el código:

    var lineas = new google.maps.Polyline({
        path: ruta,
         map: map,
         strokeColor: '#222000',
         strokeWeight: 4,
         strokeOpacity: 0.6,
         clickable: false
    });

Ejemplo de rutas en Google Maps:

Para mostrar la ruta vamos a reutilizar el código del artículo anterior en el que introducíamos una marca en un mapa, y a partir de este añadiremos el que acabamos de escribir.

El código completo sería el siguiente:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false">
// <![CDATA[
// ]]></script><script>// 
<![CDATA[
function initialize() {    
     var myOptions = {    
     center: new google.maps.LatLng(13.570648483963033, 101.44157409667969),   
     zoom: 8,      
     mapTypeId: google.maps.MapTypeId.ROADMAP         };    
     var map = new google.maps.Map(document.getElementById("map_canvas"),             myOptions); 
     gozilla3 = new google.maps.Marker({        position: new google.maps.LatLng(13.6203, 101.09),  
      icon: 'images/flecha.png',       
      map: map,         
      title: 'GodZZilla!!'          });    
      var ruta = [         new google.maps.LatLng(13.6203, 101.09),         new google.maps.LatLng(14.6203, 101.29),         new google.maps.LatLng(15.0203, 102.09)     ]; 
    var lineas = new google.maps.Polyline({        
    path: ruta,
    map: map, 
    strokeColor: '#222000', 
    strokeWeight: 4,  
    strokeOpacity: 0.6, 
    clickable: false     });       }
// ]]></script>
Rutas en Google Maps

Haz click aquí si quieres ver un ejemplo funcionando.