Comunicando dos direcciones en Google Maps

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:

<table>
  <tr>
    <td>Itinerario</td>
    <td>Mapa</td>
  </tr>
  <tr>
    <td><div id="direcciones" style="width: 275px"></div></td>
    <td><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.

Instanciando la clase GDirections

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);

Cargando la 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.

Versión del API

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 realicemos 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>