Introducción.
La georreferenciación es el proceso de determinar la ubicación (latitud, longitud) de una ubicación en la tierra según su nombre (topónimo).
Si estoy en Manizales, Caldas, Colombia estaré realmente en latitud 5.07, longitud -75.52056.
Existen varias formas de realizar este proceso dependiendo de los lenguajes de programación, interfaces y fuentes de información utilizados. Anteriormente expliqué como hacerlo utilizando C#/Mono y el servicio web de Geonames, en este caso voy a utilizar el API Javascript versión 3 de Google Maps.
La aplicación de demostración.

Como se mencionó anteriormente, la funcionalidad es precisa: convertir el nombre de una ubicación en su correspondiente localización en términos de latitud y longitud, y mostrarla en el mapa.
La implementación.
Del lado de Javascript.
Incluír la referencia al API de Google Maps.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>
Instanciar el geocodificador.
var geocoder = new google.maps.Geocoder();
Crear el mapa.
window.onload = function() { var options = { zoom: 5, center: new google.maps.LatLng(4, -72), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), options); // ...
Establecer la funcionalidad del botón Buscar.
document.getElementById('search').onclick = function() { // Obtiene la ubicación (string) a georreferenciar var location = document.getElementById('location').value; // Inicia el proceso de georreferenciación (asíncrono) processGeocoding(location, addMarkers); // Detiene el procesamiento del evento return false; } } // Fin del método window.onload
El proceso de georreferenciación es asíncrono así que es necesario especificar una función (callback) para que se ejecute si la georreferenciación termina exitosamente.
El núcleo de la georreferenciación se realiza en la invocación al método geocoder.geocode(opciones, implementacion). Es necesario determinar el estado final (status) después de la ejecución asíncrona para determinar que acción puede realizarse con los datos resultantes.
function processGeocoding(location, callback) { // Propiedades de la georreferenciación var request = { address: location } // Invocación a la georreferenciación (proceso asíncrono) geocoder.geocode(request, function(results, status) { /* * OK * ZERO_RESULTS * OVER_QUERY_LIMIT * REQUEST_DENIED * INVALID_REQUEST */ // Notifica al usuario el resultado obtenido document.getElementById('message').innerHTML = "Respuesta obtenida: " + status; // En caso de terminarse exitosamente el proyecto ... if(status == google.maps.GeocoderStatus.OK) { // Invoca la función de callback callback (results); // Retorna los resultados obtenidos return results; } // En caso de error retorna el estado return status; }); }
La función enviada como callback (addMarkers) es la responsable de tomar las ubicaciones retornadas por la georreferenciación, crearles marcadores, ventanas de información, asociarlas al evento de clic y mostrarlas en el mapa.
function addMarkers(geocodes) { for(i=0; i<geocodes.length; i++) { // Centra el mapa en la nueva ubicación map.setCenter(geocodes[i].geometry.location); // Valores iniciales del marcador var marker = new google.maps.Marker({ map: map, title: geocodes[i].formatted_address }); // Establece la ubicación del marcador marker.setPosition(geocodes[i].geometry.location); // Establece el contenido de la ventana de información var infoWindow = new google.maps.InfoWindow(); content = "Ubicación: " + geocodes[i].formatted_address + "<br />" + "Tipo: " + geocodes[i].types + "<br />" + "Latitud: " + geocodes[i].geometry.location.lat() + "<br />" + "Longitud: " + geocodes[i].geometry.location.lng(); infoWindow.setContent(content); // Asocia el evento de clic sobre el marcador con el despliegue // de la ventana de información google.maps.event.addListener(marker, 'click', function(event) { infoWindow.open(map, marker); }); } }
Del lado de HTML.
Se implementa una estructura muy simple para desplegar la información. Una primera parte permite desplegar el mensaje de información acerca del estado del proceso y le permite al usuario ingresar el nombre de la ubicación a georreferenciar.
<!-- Mensaje de estado --> <div id="message"></div> <!-- Ubicación a georreferenciarse --> <label for="location">Ubicación:</label> <input type="text" id="location" name="location" value="" size="40" /> <!-- Botón para inciar la georreferenciación --> <input type="button" id="search" name="search" value="Buscar" />
Una segunda parte establece la ubicación para desplegar el mapa.
<!-- Lugar de despliegue del mapa --> <div id="map"></div>
Enlaces.
- Aplicación de demostración del API v3 de georreferenciación de Google Maps 0.1.
http://demo.jorgeivanmeza.com/GMaps/GeocodeAPI3Demo/0.1/demo.html - The Google Geocoding API.
http://code.google.com/apis/maps/documentation/geocoding/index.html - Geocoding service.
http://code.google.com/apis/maps/documentation/javascript/services.html#Geocoding
Hola amigo como estas, esta muy bueno el tutorial, ya lo implemente pero tengo un problema, no se si tu tambien lo tengas, el autocomplete no funciona en ie7, tu lo has probado en este navegador?
Saludos y muchas gracias
Saludos Juan, no lo he probado con IE ya que mi plataforma principal de desarrollo es Linux.
Disculpa, ¿cómo podría hacer para que los marcadores estén numerados, pero que su numeración se actualice si agrego un nuevo marcador?
Porque cree un mapa en googlemaps, pero tengo demasiados marcadores y necesito saber por referencia cual es cada uno. La referencia la tengo en en panel izquierdo, pero si quiero imprimir el mapa no tengo forma de saber cual es cada punto…
Si me pueden ayudar me salvan.. muchas gracias
Que tal amigo, antes que nada muchas felicidades esta muy bueno el trabajo que hiciste, aprovecho para pedirte ayuda ya que no me funciona, tengo que poner todo el código dentro de un html haciendo etiquetas de para los javascript o como? no podrías enviarme el documento funcionando?
Hola, he escrito tu codigo y el mapa no se esta pintando, muestra un mensaje que dice OK pero no el mapa, que le faltara, ya cheque el tu codigo desde el navegador pero aun asi no me funciona.
Hola que tal Gonzalo, a mi me funciono muy bien si quieres mandame el código y yo te ayudo a este correo lennin.rubio at gmail com
Hola quiero manejaro en netbeans pero no se como me podrias colaborar
hola ya lo implemente pero no me sale el mapa y pues nada mas no solo el grafico de html me puedes ayudar
Mil gracias, no sabes lo mucho que me acaba de ayudar este tutorial. Dios te bendiga 🙂