Clase GDirections de Google Maps para crear rutas

23 de junio de 2009

Cómo crear rutas entre dos puntos en un mapa de Google con la clase Gdirections del API de Google Maps.

En este artículo vamos a ver como se utiliza la clase Gdirections, que forma parte del API de Google Maps. Esta clase, que todavía no habíamos estudiado en nuestro Manual de mapas de Google, sirve para crear una ruta en un mapa, indicando el lugar de origen, el destino y el tipo de trayecto, en coche o a pie.

Como estamos haciendo a lo largo de este manual, presentaremos estas guías para creación de rutas entre dos puntos, de manera práctica y mostrando cómo hemos realizado nosotros un ejemplo básico. El ejemplo en marcha se puede ver en este enlace.

Formulario con los datos de entrada para la ruta

Para empezar, crearemos un formulario que pida los datos necesarios para crear la ruta. Éstos son, básicamente, un punto de inicio y un punto de fin, que se tienen que indicar con notación de Google Maps, es decir, con toda la información del punto, desde lo más particular a lo más general, separada por comas.

Ejemplo: Si deseamos especificar un destino de una ciudad podría ser suficiente colocar esa ciudad y luego una coma y el nombre del país. Por ejemplo, "Valencia, España". Pero también podríamos indicar un barrio o una calle, por ejemplo "Copacabana, Río de Janeiro, Brasil" o "gran vía 3, madrid, españa". Pero en general el campo es bastante permisivo, soportando cosas como "las rozas, madrid", en la que se indica sólo el nombre de un pueblo y la provincia.

En el formulario también recogeremos si la ruta es andando o en coche, puesto que este sistema es capaz de proponer rutas distintas para estos dos casos:

<form action="#" name="form_ruta" onsubmit="obtenerRuta(this.desde.value, this.hasta.value); return false">
<table>

   <tr>
      <td align="right" >
         <strong>Desde:</strong>
         <input type="text" size="25" id="desde" name="desde" value="Madrid, España"/>
      </td>
      <td align="right">
         <strong>Hasta:</strong>
         <input type="text" size="25" id="hasta" name="hasta" value="Toledo, España" />
      </td>


   </tr>
   <tr>
      <td align="center" colspan="2">
         <strong>Tipo trayecto: </strong>
         <input type="radio" name="tipo" id="tipo" value="2" checked/> En coche
         <input type="radio" name="tipo" id="tipo" value="1" /> A pie
         <input name="ruta" type="submit" value="Obtener ruta" />
      </td>
   </tr>
</table>
</form>

Función para crear el mapa de Google con las rutas

Ahora veamos la función que generará el mapa de Google con la ruta que se haya definido en el formulario anterior.

function load() {
   if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map"));
      gdir = new GDirections(map, document.getElementById("direcciones"));
      GEvent.addListener(gdir, "load", onGDirectionsLoad);
       GEvent.addListener(gdir, "error", mostrarError);
      obtenerRuta("Madrid, Spain", "Toledo, Spain");
   }
}

Para que se muestren las indicaciones de la ruta hay que crear un objeto de clase Gdirections y al construirlo tendremos que pasar como parámetro el objeto GMap2 de nuestro mapa y la etiqueta DIV donde se van a mostrar los resultados de texto de la ruta, es decir la explicación en texto de todo el recorrido que hay que hacer para realizar ese camino.

gdir = new GDirections(map, document.getElementById("direcciones"));

También podemos añadir un nuevo evento al objeto creado "gdir" que muestre un resumen de la ruta obtenida mediante la llamada a la función onGDirectionsLoad.

function onGDirectionsLoad(){
//resumen de tiempo y distancia
document.getElementById("getDistance").innerHTML =gdir.getSummaryHtml();
}

Para controlar algún posible error al cargar la ruta, hay que añadir un nuevo evento al objeto "gdir", para que cuando ocurra algún error, llame a la función mostrarError. En esta función hemos mostrado algunos de los errores necesarios para la clase GDirections que se pueden controlar al crear una ruta, puedes ver más códigos de error en http://code.google.com/intl/es/apis/maps/documentation/reference.html#GGeoStatusCode

function mostrarError(){
    if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
       alert("No se ha encontrado una ubicación geográfica que se corresponda con la dirección especificada.");
    else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
       alert("No se ha podido procesar correctamente la solicitud de ruta o de códigos geográficos, sin saberse el motivo exacto del fallo.");
    else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
       alert("Falta el parámetro HTTP q o no tiene valor alguno. En las solicitudes de códigos geográficos, esto significa que se ha especificado una dirección vacía.");
   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
       alert("La clave proporcionada no es válida o no coincide con el dominio para el cual se ha indicado.");
    else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
       alert("No se ha podido analizar correctamente la solicitud de ruta.");
    else alert("Error desconocido.");

}

Al crear el mapa de Google, hemos llamado a la función mostrarRuta() al final del todo, para que al cargar el mapa, muestre una ruta inicial desde Madrid hasta Toledo en coche.

Para cargar la ruta, hay que llamar al método load de la clase GDirections, indicándole las propiedades origen (from), destino (to), idioma(locale) y el tipo de trayecto (travelMode). Si este último parámetro se omite, por defecto se creará una ruta en coche.

Puedes consultar la guía de referencia del API de google maps para saber más sobre la clase GDirections en http://code.google.com/intl/es/apis/maps/documentation/reference.html#GDirections

Ejemplo de rutas entre dos puntos en Google Maps completo

Para terminar, vamos a mostrar el código completo del ejemplo. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Rutas en Google Maps</title>
<script src=" http://maps.google.com/?file=api&v=2.x&key=CLAVE-GOOGLE-MAPS"
type="text/javascript"></script>
<script type="text/javascript">

var map;
var gdir;
var geocoder = null;
   function load() {
      if (GBrowserIsCompatible()) {
         map = new GMap2(document.getElementById("map"));
         gdir = new GDirections(map, document.getElementById("direcciones"));
         GEvent.addListener(gdir, "load", onGDirectionsLoad);
   GEvent.addListener(gdir, "error", mostrarError);
         obtenerRuta("Madrid, Spain", "Toledo, Spain");
      }
   }

function obtenerRuta(desde, hasta) {
      var i;
      var tipo;
      //comprobar tipo trayecto seleccionado
   for (i=0;i<document.form_ruta.tipo.length;i++){
      if (document.form_ruta.tipo[i].checked){
      break;
         }
   }
   tipo = document.form_ruta.tipo[i].value;
      if(tipo==1){
         //a pie
      gdir.load("from: " + desde + " to: " + hasta,
{ "locale": "es", "travelMode" : G_TRAVEL_MODE_WALKING });
      }else{
         //conduccion
         gdir.load("from: " + desde + " to: " + hasta,
{ "locale": "es", "travelMode" : G_TRAVEL_MODE_DRIVING });
      }
}

   function onGDirectionsLoad(){
      //resumen de tiempo y distancia
      document.getElementById("getDistance").innerHTML =gdir.getSummaryHtml();
   }

   function mostrarError(){
       if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
       alert("No se ha encontrado una ubicación geográfica que se corresponda con la dirección especificada.");
       else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
       alert("No se ha podido procesar correctamente la solicitud de ruta o de códigos geográficos, sin saberse el motivo exacto del fallo.");
       else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
       alert("Falta el parámetro HTTP q o no tiene valor alguno. En las solicitudes de códigos geográficos, esto significa que se ha especificado una dirección vacía.");
      else if (gdir.getStatus().code == G_GEO_BAD_KEY)
       alert("La clave proporcionada no es válida o no coincide con el dominio para el cual se ha indicado.");
       else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
       alert("No se ha podido analizar correctamente la solicitud de ruta.");
       else alert("Error desconocido.");

   }
</script>

</head>
<body >

<h2>Rutas en Google Maps</h2>
<form action="#" name="form_ruta" onsubmit="obtenerRuta(this.desde.value, this.hasta.value); return false">
<table>

   <tr>
      <td align="right" >
         <strong>Desde:</strong>
         <input type="text" size="25" id="desde" name="desde" value="Madrid, España"/>
      </td>
      <td align="right">
         <strong>Hasta:</strong>
         <input type="text" size="25" id="hasta" name="hasta" value="Toledo, España" />
      </td>


   </tr>
   <tr>
      <td align="center" colspan="2">
         <strong>Tipo trayecto: </strong>
         <input type="radio" name="tipo" id="tipo" value="2" checked/> En coche
         <input type="radio" name="tipo" id="tipo" value="1" /> A pie
      <input name="ruta" type="submit" value="Obtener ruta" />
      </td>
   </tr>
</table>
</form>
<br/>
<table>
   <tr>
      <td>
         <strong>Mapa</strong>
      </td>
   </tr>
   <tr>
      <td valign="top">
         <div id="map" style="width: 560px; height: 250px"></div>
      </td>
   </tr>
   <tr>
      <td>
         <strong>Direcciones de la ruta</strong>
      </td>
   </tr>
   <tr>
      <td valign="top">
         Distancia y tiempo: <div id="getDistance"></div>
         <div id="direcciones" style="width: 560px"></div>
      </td>
   </tr>
</table>
   </body>
</html>
<script>
   window.onload=load;
   window.onunload=GUnload;
</script>

Si lo deseas, puedes ver el ejemplo en marcha en una página aparte.

Gema Maria Molina Prados

Equipo DesarrolloWeb.com

Manual

Manual del API de Google Maps

Colorear países en mapas de Google