El servicio de rutas se obtiene mediante un objeto de la API llamado DirectionsService, según la documentación de Google este objeto "permite obtener rutas para distintos medios de transporte. Este objeto se comunica con el servicio de rutas del API de Google Maps, que recibe solicitudes de rutas y devuelve los resultados calculados".
Para explorar el API haremos un ejemplo donde podamos poner un punto inicial, un punto final, además de agregar puntos intermedios en una ruta.
El código en ciertas formas es similar al del ejemplo de Introducción al API de Google Maps, eliminaremos unas cosas, agregaremos otras, pero al fin y al cabo sigue siendo un mapa. Seguiremos usando la estructura del ejercicio pasado, un archivo "index.html" y 2 carpetas "js" y "css". Al archivo index.html le agregaremos un par de elementos ya que no solo necesitamos el mapa, ahora también otros elementos con los que se pueda interactuar para brindarle funcionalidad. Necesitamos 2 combos, uno para seleccionar el tipo de transporte y otro para seleccionar el tipo de punto(inicial, final o intermedio) que se agregara al mapa.
Como hay que cambiar el contenido del ejemplo anterior, hay que editar el archivo index.html para dejarlo de la siguiente manera.
En este ejemplo solo usaremos 2 tipos de modos de viaje, caminando o manejando, hay otros tipos pero estos dependen mucho del lugar del que solicitemos la ruta.
Después iremos al archivo "mapa.js" y agregaremos unas cuantas variables.
Las variables que destacan son dibuja_rutas, la cual es un objeto DirectionsRenderer que se liga con el mapa y lo dibuja según lo que la variable servicio_rutas traiga como resultado, la opción suppressMarker evita que cree marcadores en el punto de inicio y final ya que en este ejemplo se dibujaran cuando le demos clic al mapa, y la variable servicio_rutas, es un objeto DirectionsService que realiza una consulta tomando como parámetros el tipo de viaje, puntos inicial, final e intermedios, entre otros.
Modificaremos un poco el comportamiento del método cargar_mapa, para que asigne un evento cuando el combo que indica el tipo de transporte cambie y que ligue el mapa con el objeto DirectionsRenderer.
Modificaremos el método agregar_punto para que guarde el punto según el tipo deseado, hay que destacar que cuando el tipo es 2 se guarda un DirectionsWaypoint, este objeto es una especificación no tienen una clase como tal y no puede crearse con new , solo se declara el objeto en notación javascript y cuando se use el DirectionsService este consultara los atributos del waypoint, cabe aclarar que en la documentación oficial indica que en el API gratuita solo permite 8 DirectionsWaypoint en una consulta (incluyendo el origen y el destino) y en el API for Bussiness permite 23 (incluyendo el origen y el destino).
Agregaremos un método llamado calcula ruta, que solo se ejecutara cuando el punto inicial y final no sean nulos, este en su variable request recolecta los parámetros con los cuales DirectionsService realizará la consulta, y al recibir la respuesta mandará a llamar al .
Agregaremos un método para crear la ruta y otro para crear un marcador, el de crear ruta dibujara los elementos según los datos que hayamos agregado. En el método crea_ruta recibe 2 parametros, el primero es un objeto de tipo DirectionsRoute que contiene el resultado de la consulta y el segundo es un objeto DirectionsStatus que indica el estado de la consulta. Si la consulta fue satisfactoria entonces el resultado se dibuja en el mapa.
No fui muy explicito con algunas partes de este post ya que documente el código entonces, muchas cosas las explico. He aquí el resultado final y el Código.
Cualquier duda pueden contactarme :), no se les olvide seguirme en G+, Twitter, Facebook. Cuando consiga un micrófono haré la versión de este tutorial en vídeo mientras pueden suscribirse en mi canal. Si quieren que haga un tutorial sobre cierto tema de Google Maps (web) también pueden solicitarlo, hazlo aquí :) No olviden comentar.
Como hay que cambiar el contenido del ejemplo anterior, hay que editar el archivo index.html para dejarlo de la siguiente manera.
En este ejemplo solo usaremos 2 tipos de modos de viaje, caminando o manejando, hay otros tipos pero estos dependen mucho del lugar del que solicitemos la ruta.
Después iremos al archivo "mapa.js" y agregaremos unas cuantas variables.
Las variables que destacan son dibuja_rutas, la cual es un objeto DirectionsRenderer que se liga con el mapa y lo dibuja según lo que la variable servicio_rutas traiga como resultado, la opción suppressMarker evita que cree marcadores en el punto de inicio y final ya que en este ejemplo se dibujaran cuando le demos clic al mapa, y la variable servicio_rutas, es un objeto DirectionsService que realiza una consulta tomando como parámetros el tipo de viaje, puntos inicial, final e intermedios, entre otros.
Modificaremos un poco el comportamiento del método cargar_mapa, para que asigne un evento cuando el combo que indica el tipo de transporte cambie y que ligue el mapa con el objeto DirectionsRenderer.
Modificaremos el método agregar_punto para que guarde el punto según el tipo deseado, hay que destacar que cuando el tipo es 2 se guarda un DirectionsWaypoint, este objeto es una especificación no tienen una clase como tal y no puede crearse con new , solo se declara el objeto en notación javascript y cuando se use el DirectionsService este consultara los atributos del waypoint, cabe aclarar que en la documentación oficial indica que en el API gratuita solo permite 8 DirectionsWaypoint en una consulta (incluyendo el origen y el destino) y en el API for Bussiness permite 23 (incluyendo el origen y el destino).
Agregaremos un método llamado calcula ruta, que solo se ejecutara cuando el punto inicial y final no sean nulos, este en su variable request recolecta los parámetros con los cuales DirectionsService realizará la consulta, y al recibir la respuesta mandará a llamar al .
Agregaremos un método para crear la ruta y otro para crear un marcador, el de crear ruta dibujara los elementos según los datos que hayamos agregado. En el método crea_ruta recibe 2 parametros, el primero es un objeto de tipo DirectionsRoute que contiene el resultado de la consulta y el segundo es un objeto DirectionsStatus que indica el estado de la consulta. Si la consulta fue satisfactoria entonces el resultado se dibuja en el mapa.
No fui muy explicito con algunas partes de este post ya que documente el código entonces, muchas cosas las explico. He aquí el resultado final y el Código.
Cualquier duda pueden contactarme :), no se les olvide seguirme en G+, Twitter, Facebook. Cuando consiga un micrófono haré la versión de este tutorial en vídeo mientras pueden suscribirse en mi canal. Si quieren que haga un tutorial sobre cierto tema de Google Maps (web) también pueden solicitarlo, hazlo aquí :) No olviden comentar.
No hay comentarios:
Publicar un comentario