Buscar y trazar rutas con GMaps API v3

Si no tienes mucha experiencia o tienes dudas con respecto a algo que usemos en este post, puedes consultar los demás ejemplos que se han realizado anteriormente aquí.

En esta ocasión veremos un ejemplo buscado por muchos, y que puede llegar a tener gran utilidad dependiendo de nuestra aplicación, estamos hablando de trazar rutas… dije ¿rutas?, si, rutas, direcciones, un pequeño GPS en web.

Lo que haremos es bastante sencillo de entender y lo pondremos de la manera más básica, esto para darte la amplitud a que lo mejores y le pongas la cara que desees.

El proceso es entendido por todos, es proporcionar 2 puntos, un origen y un destino, a partir de esto, que nos proporcione una ruta para ir de un lado a otro. Sin más preámbulo manos a la obra.

Lo primero (siempre usaremos los scripts de jQuery y GMaps) que haremos será crear el html sobre el cuál vamos a trabajar, para esto solamente requerimos 2 cajas de texto para escribir el origen y el destino, un botón para ejecutar el proceso, 2 combobox donde uno será para elegir el modo de viaje (auto, bicicleta, caminando) y el otro para elegir el sistema de medición (Métrico -mts, Km-, Imperial -ft, Mi-), por último 2 divs, uno para el espacio del mapa y otro para el panel de direcciones.

<div>
	<label for="origen">Origen</label>
	<input type="text" name="origen" id="origen" placeholder="calle, ciudad, estado..." />
	<br />
	<label for="destino">Destino</label>
	<input type="text" name="destino" id="destino" placeholder="calle, ciudad, estado..." />
	<br />
	<input type="button" id="buscar" value="Buscar ruta"  />
</div>
<br />
<h3>Opciones</h3>
<div id="rutaOps">
	<select id="modo_viaje" class="opciones_ruta">
		<option value="DRIVING" selected="selected">Auto</option>
      	<option value="BICYCLING">Bicicleta</option>
      	<option value="WALKING">Caminando</option>
  	</select>
  	<select id="tipo_sistema" class="opciones_ruta">
      	<option value="METRIC" selected="selected">Métrico</option>
      	<option value="IMPERIAL">Imperial</option>
  	</select>
</div>
<br />
<div>
	<div id="map_canvas" style="float:left; width:70%; height:500px"></div>
	<div id="panel_ruta" style="float:right; overflow: auto; width:30%; height: 500px"></div>
</div>

Una vez que tenemos el HTML nos enfocaremos en el la API y JS completamente, declaramos 2 objetos globales, uno es DirectionsRenderer y otro es DirectionsService. El primero nos dará las herramientas necesarias para que visualicemos en el navegador toda la información obtenida, el segundo es el servicio que buscará en las bases de datos de Google Maps tanto los puntos como la(s) rutas existentes.

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

Una vez hecho esto, escribimos el código para ya tener inicializado y dibujado el mapa en nuestra página, creamos una función con el nombre que nosotros queramos, dentro de ella, vamos a colocar lo siguiente:

var request = {
 origin: $('#origen').val(),
 destination: $('#destino').val(),
 travelMode: google.maps.DirectionsTravelMode[$('#modo_viaje').val()],
 unitSystem: google.maps.DirectionsUnitSystem[$('#tipo_sistema').val()],
 provideRouteAlternatives: true
 };

Línea por línea:

1. Declaramos una variable con las opciones con las que se va a solicitar la información al objeto DirectionsServices, lo siguiente son parámetros para hacer la búsqueda de acuerdo a los datos introducidos.
2. A origin se le asigna el valor de  la caja de texto origen estableciendo el punto de partida de la ruta.
3. A destination se le asigna el valor de la caja de texto destino con el que se especifica el punto final de la ruta.
4. En la opción travelMode se asigna la opción elegida para el modo de viaje (modo_viaje), por esta razón en el valor de cada opción se definió de acuerdo al valor asignado en la API.
5. unitSystem se refiere al tipo de unidades que se utilizarán para mostrar distancias, obteniendo el valor del tipo_sistema.
6. Con la opción provideRouteAlternatives establecemos en verdadero o falso (por default false), para indicar que puede ofrecernos más resultados para las rutas (rutas alternativas).

Una vez declarada la variable con el arreglo de los parámetros, con unas cuántas líneas vamos a hacer la solicitud y plasmar el resultado:

directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
		directionsDisplay.setMap(map);
		directionsDisplay.setPanel($("#panel_ruta").get(0));
		directionsDisplay.setDirections(response);
	} else {
	        alert("No existen rutas entre ambos puntos");
	}
});

Recordemos que al inicio declaramos 2 objetos, teniendo en cuenta su función, les explico línea a línea:

1. directionsService.route hace la solicitud a la API con los datos que previamente establecimos (request), creamos una una función interna, que recibe los parámetros de respuesta (response) que es donde vendrían contenidos los datos y un estatus (status) que indica si fue exitosa la solicitud.
2. Si el estatus es OK procedemos, si no, mandamos un mensaje de error diciendo que no se pudo encontrar ruta entre ambos puntos. Existe una serie de estatus distintos, sin embargo y para efectos prácticos solamente usamos aquí el OK (para ver más tipos de status, hay que ir directamente a la documentación de la API).
3. directionsDisplay.setMap(map) establece el mapa sobre el cuál será trazada la ruta, la variable map debe ser un objeto tipo Mapa, además de global.
4. directionsDisplay.setPanel($(“#panel_ruta”).get(0)) indica dónde van a ser escritas las indicaciones de la ruta, aquí es necesario indicar un div disponible (panel_ruta).
5. directionsDisplay.setDirections(response) hace la magia, imprime en el mapa la ruta y escribe las indicaciones de acuerdo a las 2 instrucciones anteriores.

Por último solamente creamos un par de funciones para que al hacer click en el botón busque la ruta o la redibuje si se eligen diferentes opciones, esto es opcional, si no lo quieren así hay que hacer que indicar que al hacer click, la función central se ejecute, para mi caso, la función la llamé rockAndRoll  😀

$('#buscar').live('click', function(){
	rockAndRoll();
});

$('.opciones_ruta').live('change', function(){
	rockAndRoll();
});

Es todo por esta ocasión, espero les ayude en sus proyectos o simplemente para jugar un rato, si quieren verlo en función denle click en el botón verde, dudas y comentarios son bien recibidos, o pueden encontrarme en twitter @jafrancov

Enjoy this Life!!