Localizar direcciones usando Geocoder de Google Maps

¡Hola, felices fiestas! Uff, prácticamente 4 meses sin postear nada. Pero, hey, siempre estoy atento a los comentarios 😛

En esta ocasión quisiera compartir conocimientos de algo con lo que estuve trabajando recientemente: el servicio Geocoder de Google Maps Javascript API (v3). Este servicio (la geocodificación) consiste en convertir direcciones “humanas” a coordenadas geográficas (latitud y longitud) para poder mostrar un marcador en el mapa.

Vista previa del ejemplo:

Geocoder Google Maps Javascript API

Por fin un tutorial con estilos

Notas iniciales:

Para este tutorial necesitaremos una cuenta de Google.

¿Cómo usar Google Maps Geocoder?

Este desarrollo se hizo en local usando XAMPP. El único servicio activo es Apache (no requiero MySQL para este ejemplo).

API KEY de Google

Es fundamental tener una clave de API para poder llamar a estos servicios. Si ya tenés una clave por favor continúa con el tutorial, sino te voy a mostrar como crear un proyecto y conseguir una API KEY.

Lo primero es ir a Google APIs Console (https://console.developers.google.com) y crear un proyecto.

Creamos un proyecto asignándole un nombre.

Proyecto creado

Proyecto creado

Ahora debemos ir a Biblioteca (menú lateral) y añadir la API para Javascript de Google Maps a nuestro proyecto. Clickeamos el link y habilitamos la API.

A continuación nos va a pedir que creemos credenciales para esa API.

Antes de eso recomiendo abrir una nueva pestaña con la misma página (Google APIs Console), ir a la Biblioteca, y en el sector “APIs de Google Maps” desplegar la lista para poder habilitar la API de Geocoding.

Si vamos al Panel de control (menú lateral) deberíamos ver las dos API habilitadas.

Ahora sí vamos a obtener las credenciales (básicamente la API KEY) y de paso (opcionalmente) restringir el acceso a un dominio (en mi caso, a localhost) tal y como recomiendan desde Google.

Click en “Restringir la clave”.

Cualquier archivo dentro de la carpeta "mmv" podrá acceder a esa KEY.

Cualquier archivo dentro de la carpeta “mmv” podrá acceder a esa KEY.

Bien, ya tenemos nuestra API KEY.

Continuemos.

1 de 2: HTML y CSS

Debemos armar una estructura para mostrar el buscador y el mapa. Esto no es más que un div que contiene un título, un input y un div que se usa como botón. Los estilos son sencillos.

El contenedor del mapa será un div con posición absoluta, ocupando el 100% de la pantalla y un fondo de color (para la primera carga, cuando no hay mapa). La altura la definiremos enseguida desde JS para que se adapte a cualquier tamaño.

Debemos incluir jQuery (yo estoy usando la versión 2.1.0 minificada).

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Geocoder</title>
<style>
body,
body * {
	margin:0;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

.buscador {
	text-align:center;
	padding:30px 0px;
}

.buscador #direccion {
	margin:10px auto;
	width:100%;
	padding:7px;
	max-width:250px;
}

.buscador #buscar {
	margin:0 auto;
	max-width:250px;
	padding:7px;
	color:#FFFFFF;
	background:#f2777a;
	border:2px solid #f2777a;
	cursor:pointer;
}
</style>
</head>
<body>

<div class="buscador">
	<h2>Ingrese una dirección</h2>
    <input type="text" id="direccion">
    <div id="buscar">Buscar</div>
</div>

<div id="mapa-geocoder" class="mapa" style="width:100%;display:block;position:absolute;background:#f2777a;"></div>

<script src="assets/js/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function() {
	$(window).on("load resize", function() {
		var alturaBuscador = $(".buscador").outerHeight(true),
			alturaVentana = $(window).height(),
			alturaMapa = alturaVentana - alturaBuscador;
		
		$("#mapa-geocoder").css("height", alturaMapa+"px");
	});
});
</script>
</body>
</html>
2 de 2: Javascript/jQuery

Lo primero que vamos a hacer es crear una función llamada localizar, donde debemos setear dos parámetros: el ID del elemento donde se “imprimirá” el mapa y la dirección (la cual obtendremos desde el input). Dentro de esa función vamos a llamar al servicio Geocoder y setear los datos básicos del mapa (nivel de zoom, si se permitirá zoom al hacer scroll y el tipo de mapa). Una vez hecho eso, llamaremos al servicio pasándole como parámetro un objeto que tenga como clave “address” (debe ser así, en inglés) y como valor pasaremos la dirección escrita en el input.

Entonces la API nos devolverá dos resultados posibles (GeocodingStatusCodes), “OK” o error. Si el resultado es “OK”, posicionaremos un marcador en el mapa y ajustaremos la vista para que se centre en ese marcador. Si el resultado es un error, devolveremos un mensaje en forma de alert().

Una vez creada esa función, vamos a llamar a la API de Google Maps con el método $.getScript() de jQuery. Cuando haya cargado, indicaremos que el botón de buscar ($("#buscar")) debe detectar el evento de click para obtener el valor del input en ese momento y enviárselo a localizar() junto con el elemento del mapa.

Añadiremos esto justo después de $(window).on("load resize" […] y antes de que cierre el $(document).ready()

No olvides incluir tu API KEY.

function localizar(elemento,direccion) {
		var geocoder = new google.maps.Geocoder();

		var map = new google.maps.Map(document.getElementById(elemento), {
		  zoom: 16,
		  scrollwheel: true,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		});
		
		geocoder.geocode({'address': direccion}, function(results, status) {
			if (status === 'OK') {
				var resultados = results[0].geometry.location,
					resultados_lat = resultados.lat(),
					resultados_long = resultados.lng();
				
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map: map,
					position: results[0].geometry.location
				});
			} else {
				var mensajeError = "";
				if (status === "ZERO_RESULTS") {
					mensajeError = "No hubo resultados para la dirección ingresada.";
				} else if (status === "OVER_QUERY_LIMIT" || status === "REQUEST_DENIED" || status === "UNKNOWN_ERROR") {
					mensajeError = "Error general del mapa.";
				} else if (status === "INVALID_REQUEST") {
					mensajeError = "Error de la web. Contacte con Name Agency.";
				}
				alert(mensajeError);
			}
		});
	}
	
    $.getScript("https://maps.googleapis.com/maps/api/js?key=TU_API_KEY", function() {
		$("#buscar").click(function() {
            var direccion = $("#direccion").val();
			if (direccion !== "") {
				localizar("mapa-geocoder", direccion);
			}
        });
	});

Y listo. Para más información recomiendo visitar la página con la documentación oficial.

Conclusión:

Muy sencillo de aplicar, ¡gracias Google!

Espero que el tutorial haya sido de utilidad. Nos leemos, ¡saludos!

Anuncios

One comment

  1. Eugenio Avila · diciembre 28

    Muy buen aporte. Saludos

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s