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.
- Añadir un mapa de Google a nuestra pagina / aplicacion web.
- Utilizar la funcion autocomplete de Google para mostrar sugerencias de ubicaciones a un input text.
- Calcular el tiempo estimado entre dos puntos.
- 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,
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
justo antes del cierre de la etiqueta body.
¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:
WebEmpresaAhora vamos al codigo html de nuestra pagina.
Deberemos tener 2 cajas de texto donde escribiremos los puntos A y B.
<input id="input-ubicacion-a" type="text" class="form-control" placeholder="Ubicacion A" > <input id="input-ubicacion-b" type="text" class="form-control" placeholder="Ubicacion 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,
<button id="btn-calcular-tiempo" type="button" class="btn btn-default"> Calcular </button>
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,
<div id="div-resultado"></div>
Por ultimo y no menos importante necesitamos un div vacío en el cual dibujaremos nuestro mapa de Google asi,
<div id="map-canvas"></div>
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,
#map-canvas{
height:600px;
}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,
<script src="js/process.js"></script>
Dentro de este archivo escribiremos toda la magia,
primero vamos a lograr que nuestro mapa aparezca donde debe estar para esto escribimos,
var map;
var geocoder;
function initialize() {
var opts = {
center: new google.maps.LatLng(20.6144226,-100.4057373),
zoom: 10
};
map = new google.maps.Map(document.getElementById('map-canvas'), opts);
geocoder = new google.maps.Geocoder();
}
google.maps.event.addDomListener(window, 'load', initialize);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.
Ya 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,
var inputa = document.getElementById("input-ubicacion-a");
autocomplete = new google.maps.places.Autocomplete(inputa);
var inputb = document.getElementById("input-ubicacion-b");
autocomplete = new google.maps.places.Autocomplete(inputb);Obtenemos el input text por su Id y creamos una nueva instancia de autocomplete pasando como parametro nuestra caja de texto.
Bastante fácil!
Ahora calcularemos el tiempo estimado entre dos puntos escritos en las cajas de texto, utilizaremos el siguiente codigo,
$("#btn-calcular-tiempo").click(function(event){
$("#div-resultado").html("Calculando..<br />");
var ubicaciona = $("#input-ubicacion-a").val();
var ubicacionb = $("#input-ubicacion-b").val();
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [ubicaciona],
destinations: [ubicacionb],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
},callback);
});
function callback(respuesta, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
$("#div-resultado").append('Error: ' + status);
} else {
var origen = respuesta.originAddresses;
var destino = respuesta.destinationAddresses;
deleteOverlays();
for (var i = 0; i < origen.length; i++) {
var results = respuesta.rows[i].elements;
addMarker(origen[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destino[j], true);
$("#div-resultado").append('Desde ' + origen[i] + ' hasta ' + destino[j]
+ ' son <code>' + results[j].distance.text + '</code> y el tiempo estimado es de <code>'
+ results[j].duration.text + '</code><br />');
}
}
}
}
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,
Para poder agregar los marcadores a nuestro mapa vamos a ver el codigo de las funciones addmarker() y deleteOverlays(),
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=B|00FF00|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=A|FFFF00|000000';
function addMarker(location, isDestination) {
var icon;
if (isDestination) {
icon = destinationIcon;
} else {
icon = originIcon;
}
geocoder.geocode({'address': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
});
markersArray.push(marker);
} else {
$("#div-resultado").append('Error al obtener el Geocode: ' + status);
}
});
}
function deleteOverlays() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}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,
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!