Comunicando dos direcciones en Google Maps Junio 9, 2007
Publicado por lineadecodigo en : Google , trackbackHace 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:
<table>
<tr>
<th>Itinerario</th><th>Mapa</th><
/tr>
<tr>
<td valign="top"><div id="direcciones" style="width: 275px"></div></td>
<td valign="top"><div id="mapa" style="width: 310px; height: 400px"></div></td>
</tr>
</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.
panel_ruta = document.getElementById("direcciones");
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:
ruta.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
<script src="http://maps.google.com/maps?file=api&v=2.x&key=tu_clave" type="text/javascript"></script>
Visualizar el ejemplo | Descargar el código
Articulos Similares:
- Ventanas de información con imágenes en Google Maps
- Cargando Google Maps
- Abrir una ventana de información en Google Maps
- Poner un icono dentro de Google Maps
- Incluir imagenes en Google Maps
Enviar entrada por email
| 
Imprimir
| 4909 visitas
(Todavia sin evaluar)
Loading ...
Comentarios»
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
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
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
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
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
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
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?
Hola, mi duda es como trazar direcciones entre datos dados en longitud y en latitud, gracias.
Martin podias publicar el codigo de distancia entre ciudades, sino es mucha molestia
. Muchas Gracias de antemano.