Tiempo estimado entre dos puntos con Places Api

Tiempo estimado entre dos puntos con Places Api

Tiempo estimado entre dos puntos con Places Api
5 (100%) 1 voto

El dia de hoy daremos un breve paseo por la Places Api de Google y al final del post podras calcular ( o al menos pedirle a Google que lo haga por ti yum ) el tiempo estimado entre dos puntos o ubicaciones mediante esta api. Simplemente tendremos una app web con dos cajas de texto donde escribiremos las 2 ubicaciones que calcularemos su tiempo estimado en coche, tambien habra por supuesto un boton para preceder a ejecutar la operacion y al final se te mostrara el tiempo estimado, kilometros y las ubicaciones marcadas en un mapa, ¿te animas?

Antes de empezar vamos a mencionar los 4 puntos que aprenderemos el dia de hoy.

  1. Añadir un mapa de Google a nuestra pagina / aplicacion web.
  2. Utilizar la funcion autocomplete de Google para mostrar sugerencias de ubicaciones a un input text.
  3. Calcular el tiempo estimado entre dos puntos.
  4. Mostrar y ocultar marcadores dentro de nuestro mapa.

También para resaltar que utilizaremos html, css, jquery y javascript.

Comencemos..

Primero que nada debemos hacer uso de la libreria places de google, la llamamos dentro de nuestra pagina asi,

justo antes del cierre de la etiqueta body.

Ahora vamos al codigo html de nuestra pagina.


Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

Deberemos tener 2 cajas de texto donde escribiremos los puntos A y B.

observa como estos 2 input tienen un id asociado para poder referirnos a estos despues dentro de javascript o JQuery.

también necesitamos un boton para calcular el tiempo estimado,

Una vez mas observa el id asociado al botón, también nos referiremos a este después.

Agrega tambien un div vacio el cual utilizaremos para mostrarle al usuario la informacion una vez este lista,

Por ultimo y no menos importante necesitamos un div vacío en el cual dibujaremos nuestro mapa de Google asi,

 

Como puedes ver el html de este proyecto es pan comido,  el verdadero trabajo aqui esta dentro de javascript.

Asegurate de agregar un tamaño de altura a nuestro div map-canvas en css para que nuestro mapa pueda visualizarse,

Para escribir nuestro codigo javascript es mas comodo trabajar en un archivo separado asi que linkea dentro de tu pagina a un archivo javascript que es donde trabajaremos,

Dentro de este archivo escribiremos toda la magia,

primero vamos a lograr que nuestro mapa aparezca donde debe estar para esto escribimos,

Declaramos un par de variables que utilizaremos, agregamos un evento para que al terminar de cargar la pagina llame a la función inicialize y dentro de esta declaramos opciones de nuestro mapa como las coordenadas donde aparecera y el nivel de zoom, luego agregamos nuestro mapa obteniendo el elemento con el id map-canvas ( nuestro div vacio ) y por ultimo creamos un geocoder.

tiempo-estimado-entre-dos-puntos-places-api-mapaYa que tenemos nuestro mapa lo siguiente es agregar el autocompletado a nuestros input text, esto podria sonar dificil de hacer pero la realidad es que google hace la mayoria del trabajo simplemente con estas 4 lineas logramos esta funcion,

Obtenemos el input text por su Id y creamos una nueva instancia de autocomplete pasando como parametro nuestra caja de texto.

tiempo-estimado-entre-dos-puntos-places-api-autocompleteBastante fácil!

Ahora calcularemos el tiempo estimado entre dos puntos escritos en las cajas de texto, utilizaremos el siguiente codigo,

 

Mediante JQuery obtenemos el evento click de nuestro boton por su id, escribimos el mensaje “Calculando..” dentro de nuestro div vacio para mostrarlo al usuario, obtenemos las ubicaciones de las cajas de texto y las guardamos en dos variables para pasarlas a la funcion getDistanceMatrix de places api asi como tambien algunas otra opciones, esta funcion necesita 2 parametros la primera son las opciones antes mencionadas y el segundo una funcion a donde regresar el resultado.

Dentro de la funcion callback simplemente se muestra al usuario la respuesta de la consulta mediante el objeto respuesta regresado por la places api.

Dentro de este codigo vemos 2 funciones hasta ahora desconocidas, deleteOverlays() y addMarker(), estas funciones son para lograr insertar marcadores con las 2 ubicaciones dentro de nuestro mapa asi como posteriormente eliminarlos para una nueva consulta.

Nuestra respuesta de tiempo estimado entre dos puntos luce asi,

tiempo-estimado-entre-dos-puntos-places-api-respuesta

Para poder agregar los marcadores a nuestro mapa vamos a ver el codigo de las funciones addmarker() y deleteOverlays(),

Antes que nada declaramos algunas variables utiles, un bounds para la latitud y longitud de nuestras ubicaciones, un arreglo de marcadores, un icono personalizado desde Google (observa los parametros finales de la url y puedes ver que son el texto del marcador y los colores ) para el origin y el destino segun sea el caso.

En la funcion addMarker se agrega un marcador y segun su segundo parametro ( si es origin o destino ) establecemos un icono u otro, se agrega el marcador a nuestro mapa y se guarda en nuestro arreglo de marcadores para posteriormente eliminarlos en la funcion deleteOverlays().

Finalmente nuestro mapa luce asi,

tiempo-estimado-entre-dos-puntos-places-api-final

Mas informacion de Places Api.

Ya que vimos como calcular el tiempo estimado entre dos puntos te agradeceria mucho si compartes este post en tu red social favorita o me dejas un comentario.

Saludos!

Tiempo estimado entre dos puntos con Places Api

Tiempo estimado entre dos puntos con Places Api
5 (100%) 1 voto

Deja tu comentario

Una respuesta ¿Qué opinas tú del tema?

  1. Christian

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Loading Facebook Comments ...