La georreferenciación inversa es el proceso contrario al descrito anteriormente, corresponde al obtener el nombre de una ubicación (topónimo) a partir de su ubicación geográfica, en términos de latitud y longitud.

La aplicación de demostración.

Aplicación de demostración para la georreferenciación inversa con el API 3 de Google Maps

En el ejemplo equivale a conocer la ubicación del sitio: latitud = 5.073375 y longitud = -75.495155, y con esta información determinar que los siguientes sitios corresponden con esa posición.

• Carrera 12, Manizales, Caldas, Colombia.
• Manizales, Caldas, Colombia.
• Caldas, Colombia.
• Colombia.

La implementación.

Su implementación es una versión ligeramente mas simple que la georreferenciación directa.

A continuación se detallan a nivel general las variaciones de esta modalidad de georreferenciación con respecto a la expuesta en un artículo anterior.

Del lado de Javascript.

Se asocia el evento de clic sobre el mapa con la función que realizará la georreferenciación inversa (processReverseGeocoding).

google.maps.event.addListener(map, 'click', function(event) {
    processReverseGeocoding(event.latLng, showMarkerInfo);
});

En esta función se realiza el proceso de georreferenciación inversa el cual, al igual que su contraparte directa, es asíncrono y por este motivo se utiliza la misma estrategia del callback.

var request = {
    latLng: location
}
geocoder.geocode(request, function(results, status) {
    // ...
});

La función showMarkerInfo es ejecutada cuando se finaliza la georreferenciación inversa y esta ha obtenido resultados válidos.  Su misión es la mostrar la información resultante en el mapa.

    function showMarkerInfo(locations)
    {
        // Centra el mapa en la ubicación especificada
        map.setCenter(locations[0].geometry.location);
        // Crea el mensaje para mostrar la información georreferenciada
        var infoWindow = new google.maps.InfoWindow();
        infoWindow.setPosition(locations[0].geometry.location);
        // Prepara el mensaje con la información obtenida del proceso
        // de georreferenciación inversa
        var content = 'Latitud:  ' + locations[0].geometry.location.lat() + '<br />' +
                      'Longitud:  ' + locations[0].geometry.location.lng() + '<br />' +
                      '<br />Topónimos:<br /><ul>';
        for (var i=0; i<locations.length; i++)
        {
            if (locations[i].formatted_address)
                content += '<li>' + locations[i].formatted_address + '</li>';
            else
                content += '<li>No se encontró información.</li>';
        }
        content += "</ul>";
        infoWindow.setContent(content);
        // Muestra el mensaje sobre el mapa
        infoWindow.open(map);
    }

Enlaces.

• Aplicación de demostración del API v3 de georreferenciación inversa de Google Maps 0.1.
  http://demo.jorgeivanmeza.com/GMaps/GeocodeAPI3Demo/0.1/reverse.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

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.

Aplicación de demostración para la georreferenciación con el API 3 de Google Maps

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

• XHTML 1.0 / 1.1
  • Transitional document.
  • Strict document.
  • Frameset.
  • Document 1.1.
• HTML 4.01
  • Transitional document.
  • Strict document.
  • Frameset.

Además de estos documentos encontré otros recursos interesantes relacionados con el desarrollo web.

• Formularios X/HTML accesibles.
  http://www.webstandards.org/learn/tutorials/accessible-forms/
• Character Entity References.
  http://www.webstandards.org/learn/reference/charts/entities/
• Colores válidos para HTML 4 y XHTML 1.0/1.1.
  http://www.webstandards.org/learn/reference/charts/color_names/
• DOCTYPEs y sus respectivos modos de diseño.
  http://www.webstandards.org/learn/reference/charts/doctype-switch/
• HTML versus XHTML.
  http://www.webstandards.org/learn/articles/askw3c/oct2003/
• Referencias de los lenguajes de marcas.
  http://www.webstandards.org/learn/external/html/
• Organizaciones relacionadas con los estándares.
  http://www.webstandards.org/learn/external/orgs/