Comunicando dos direcciones en Google Maps

09/Jun/2007 Google , , , 12 Comentarios

Hace unos días podíamos leer en aNieto2K y Tu Función que Google Maps había ampliado su API con Directions.

Directions nos permite mostrar la ruta que hay dentro de un mapa entre dos puntos.

Con Google Maps se suele utilizar una capa para posicionar el mapa. Con Directions, además del mapa, tendremos una segunda capa donde se mostrará el contenido de la ruta.

Es por ello que el código del cuerpo de la página será similar a este:

  1. <th>Itinerario</th><th>Mapa</th>
  2. </tr>
  3. <td valign="top"><div id="direcciones" style="width: 275px"></div></td>
  4. <td valign="top"><div id="mapa" style="width: 310px; height: 400px"></div></td>
  5. </tr>
  6. </table>

Hay que indicar que la capa donde cargaremos las rutas solo le damos el ancho, ya que dependiendo de la ruta que carguemos, su largo podrá ser uno u otro.

Con lo que respecta al código JavaScript lo que tenemos que hacer es instanciar la clase GDirections. Esta clase recibe dos parámetros. El primero es la variable en la que hemos instanciado el mapa y el elemento de la página donde hay que cargar la ruta.

  1. panel_ruta = document.getElementById("direcciones");
  2. ruta = new GDirections(map, panel_ruta);

Una vez que hemos instanciado la clase GDirections tendremos que cargar la ruta. Para ello utilizaremos el método .load(). Este método recibe dos parámetros, el primero es una cadena con la ruta que queremos trazar y el segundo el idioma en el que queremos que se nos presente la ruta.

Con respecto a la cadena de la ruta, esta deberá de seguir el siguiente patrón:

"from: ciudad_origen to: ciudad_destino"

El código que cargaría la ruta será el siguiente:

  1. uta.load("from: Madrid to: Avila",{locale: 'es_ES'});

Con esto ya tendríamos cargada nuestra ruta en el mapa y el texto de la ruta en la capa de la ruta.

Una cosa muy importante es que la clase Directions es incluida en la versión 2.x del API de Google Maps. Es por ello que cuando realizemos la carga del API deberemos de comprobar que la versión que estamos utilizando es la 2.x y no la 2

  1. <script src="http://maps.google.com/maps?file=api&<strong>v=2.x</strong>&key=tu_clave" type="text/javascript"></script>

Visualizar el ejemplo | Descargar el código

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

12 comentarios en “Comunicando dos direcciones en Google Maps”

Víctor Cuervo

lasb

Hola Victor, por razones de trabajo tengo que comenzar a utilizar la api de google Eahrt y basicamente la forma de vizualizar trazas de caminos. Te pido si me podes dar una mano, aunque fuera en forma de clases por las cuales pagaria. Desde ya muchas gracias por la ayuda que me puedas brindar

Víctor Cuervo

Víctor Cuervo

@absolutkarlos,

La clase GDirections tiene un método .getDistance() que devuelve la distancia. Eso sí, es un método asíncrono, por lo cual tienes que esperar a que se cargue la ruta para acceder a él.

Te dejo un código de ejemplo para orientarte:

if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("mapa"));
    map.setCenter(new GLatLng(40.674389,-4.700432), 12);
    
    panel_ruta = document.getElementById("direcciones");
	var ruta = new GDirections(map, panel_ruta);
	ruta.load("from: Madrid to: Avila",{locale: 'es_ES'});
	
	GEvent.addListener(ruta, "load", function() {	
		var distancia = ruta.getDistance();			
		document.getElementById("direcciones").innerHTML = "Distancia = " + distancia['html'];
	});
		
  }
Víctor Cuervo

absolutkarlos

hola como estan?
estoy aprendiendo con el api de google map, quiero utilizar parte del resultado del div directions, es decir, quiero utilizar el número resultante de la suma de las distancias, hay manera de tener acceso a ese resultado?

Víctor Cuervo

jose Miguel

Martin podias publicar el codigo de distancia entre ciudades, sino es mucha molestia 🙂 . Muchas Gracias de antemano.

Víctor Cuervo

daniel

Hola, mi duda es como trazar direcciones entre datos dados en longitud y en latitud, gracias.

Víctor Cuervo

Suso

Saludos,

Muy util, yo me uno a la lucha que han tenido otros en buscar un ejemplo como este, ha sido una lucha bastante encarnizada encarnizada.

Por cierto, ¿sería posible trazar una ruta desde distintas calles de una misma ciudad?

Víctor Cuervo

rony lyon

Saludos
muy bueno este ejemplo de “Comunicando dos direcciones en Google Maps” queria consultarte como podria en ves de usar la ruta
mostrar la ventana de la izquierda con datos de una base datos y que hacerle clip en un dato me aparesca la ruta geografica en el mapa del google maps agradeciendo tu respuesta

rony

Víctor Cuervo

Martin

yo tengo como sacar los datos de la distancia y los kilometros, ahora ando un poco pillado pero el que quiera que lo pida, en cuanto tenga tiempo lo publico vale

Víctor Cuervo

kabrator

Hola! me pasaba como a caos30, ke me he vuelto loco buscando ejemplos escritos. muchas gracias 🙂

Una cosa, he estrado trasteando con las apis, y me gustaria saber si se puede editar la etiqueta (marker) ke salen en las rutas (las que vienen con letras de la A a la Z), me gustaria saber eso tanto usando el load como el loadfromwaypoints. A ver si alguien me puede ayudar 🙂

Un saludo

Víctor Cuervo

caos30

Gracias por el ejemplo. Llevo toda la tarde peleándome en Google para encontrar un ejemplo mínimamente bueno como el tuyo para poder hacer esto tan simple: marcar una ruta con la API dichosa del Google Maps, jejejeje… Mil gracias! Muy buen artículo.

SERGI

Víctor Cuervo

Andoni

Me parece muy interesante el articulo, pero tengo una duda una vez que has cargado la ruta como podría acceder a los datos . como por ejemplo el tiempo dede la ruta para almacenarlos en una base de datos

Víctor Cuervo

Andoni

Me parece muy interesante el articulo, pero tengo una duda una vez que has cargado la ruta como podría acceder a los datos . como por ejemplo el tiempo dede la ruta para almacenarlos en una base de datos

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*