Desarrollo web no image

Published on febrero 25th, 2012 | by Miguel Angel Berlanga Alvarez

1

Dibujar rutas en Google Maps | v3

Rutas en Google Maps

En los post anteriores hemos visto 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 type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">// <![CDATA[
 
// ]]></script><script type="text/javascript">// <![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.

Tags: , , , , ,


About the Author



One Response to Dibujar rutas en Google Maps | v3

  1. nico says:

    No son rutas!! son lineas nomas…

Deja un comentario

Tu dirección de correo electrónico no será publicada.


8 + = nueve

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑