Geocode Simple: Buscar direcciones (coordenadas a partir de direcciones) con GMaps API v3

Si no tienes mucha experiencia o tienes dudas con respecto a algo que usemos en este post, puedes consultar los demás ejemplos que se han realizado anteriormente aquí.

Ya hemos visto el cómo obtener geolocalización para ubicar el lugar donde nos encontramos, pero, ¿qué pasa cuando buscamos una dirección diferente a donde nos encontramos?, sería necesario escribir y buscar la dirección deseada, bien pues el proceso es relativamente sencillo. (Para esto requeriremos que agregues los scripts de GMaps y de jQuery, consulta los anteriores post si tienes duda de esto).

Lo que haremos se resume en: escribir una dirección, verificar si existe, si existe, colocar un marcador, centrar y dar zoom en el mapa en la región de la dirección obtenida, si no existe la dirección arrojar un error diciendo que no existe.

La parte importante del código es generar un objeto que nos permita comunicarnos con la API  de Google Maps y nos convierta la dirección en latitud y longitud de manera que podamos maniobrarlas a placer.

var geocoder = new google.maps.Geocoder();

Cuando se genera una petición de Geocoding, pueden enviarse varios parámetros para obtener resultados más específicos, un objeto de solicitud completa comprendería:

• address (obligatorio *): es la dirección que deseas codificar de forma geográfica.
• latLng (obligatorio *): la latitud y la longitud (LatLng ) para las que deseas obtener la dirección interpretable por humanos más cercana.
• bounds (opcional): los límites de latitud y de longitud (LatLngBounds) dentro de los que quieres predeterminar los resultados de codificación geográfica con mayor importancia. Para obtener más información, consulta la sección Especificación de la ventana gráfica que encontrarás a continuación.
• language (opcional): es el idioma en el que se devuelven los resultados.
• region (opcional): el código de región, especificado como una subetiqueta region del lenguaje IANA. En la mayoría de los casos, estas etiquetas se asignan directamente a valores de dos caracteres ccTLD (“dominio de nivel superior”) ya conocidos. Para obtener más información, consulta la sección Especificación del código de región que encontrarás a continuación.

* Nota: la búsqueda funciona incluyendo solamente el campo address, aunque siempre es requisito incluir un campo address o un campo latLng obligatoriamente, si se coloca un campo latLng, el geocoder realizará el proceso conocido como codificación geográfica inversa, o sea, convertir coordenadas en direcciones, pero, eso lo veremos en otro post.

La solicitud se hace de la siguiente manera:

// Obtenemos la dirección y la asignamos a una variable
var address = $('#address').val();
// Creamos el Objeto Geocoder
var geocoder = new google.maps.Geocoder();
// Hacemos la petición indicando la dirección e invocamos la función
// geocodeResult enviando todo el resultado obtenido
geocoder.geocode({ 'address': address}, geocodeResult);

El objeto que se obtiene de respuesta es un JSON, donde lo manejaríamos como regularmente se hace en javascript, el resultado es algo como esto:

{
  "status": "OK",
  "results": [ {
    "types": [ "street_address" ],
    "formatted_address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
    "address_components": [ {
      "long_name": "1600",
      "short_name": "1600",
      "types": [ "street_number" ]
    }, {
      "long_name": "Amphitheatre Pkwy",
      "short_name": "Amphitheatre Pkwy",
      "types": [ "route" ]
    }, {
      "long_name": "Mountain View",
      "short_name": "Mountain View",
      "types": [ "locality", "political" ]
    }, {
      "long_name": "California",
      "short_name": "CA",
      "types": [ "administrative_area_level_1", "political" ]
    }, {
      "long_name": "United States",
      "short_name": "US",
      "types": [ "country", "political" ]
    }, {
      "long_name": "94043",
      "short_name": "94043",
      "types": [ "postal_code" ]
    } ],
    "geometry": {
      "location": {
        "lat": 37.4219720,
        "lng": -122.0841430
      },
      "location_type": "ROOFTOP",
      "viewport": {
        "southwest": {
          "lat": 37.4188244,
          "lng": -122.0872906
        },
        "northeast": {
          "lat": 37.4251196,
          "lng": -122.0809954
        }
      }
    }
  } ]
}

Lo único que nos faltaría es el código para validar, interpretar y dibujar. Para esto, hay 3 cosas importantes que debemos tomar en cuenta del JSON que tenemos de respuesta:

• status: contiene la respuesta del estado de la petición, si fue satisfactoria o si hubo algún error y que tipo de error.
• geometry.location: la ubicación de la dirección solicitada
• geometry.viewport: los límites recomendados para ajustar el zoom del mapa, haciendo un cuadrante con las esquinas Noreste (superior derecha) y Suroeste (inferior izquierda).

Con esto en presente, la función siguiente nos mostrará solamente el primer resultado obtenido, quedando así :

function geocodeResult(results, status) {
    // Verificamos el estatus
    if (status == 'OK') {
        // Si hay resultados encontrados, centramos y repintamos el mapa
        // esto para eliminar cualquier pin antes puesto
        var mapOptions = {
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map($("#map_canvas").get(0), mapOptions);
        // fitBounds acercará el mapa con el zoom adecuado de acuerdo a lo buscado
        map.fitBounds(results[0].geometry.viewport);
        // Dibujamos un marcador con la ubicación del primer resultado obtenido
        var markerOptions = { position: results[0].geometry.location }
        var marker = new google.maps.Marker(markerOptions);
        marker.setMap(map);
    } else {
        // En caso de no haber resultados o que haya ocurrido un error
        // lanzamos un mensaje con el error
        alert("Geocoding no tuvo éxito debido a: " + status);
    }
}

Y listo con esto tenemos terminado nuestro ejercicio, puedes verificarlo en funcionamiento en la página de demos:

El código completo quedaría así:

$(document).ready(function() {
    load_map();
});

var map;

function load_map() {
    var myLatlng = new google.maps.LatLng(20.68009, -101.35403);
    var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($("#map_canvas").get(0), myOptions);
}

$('#search').live('click', function() {
    // Obtenemos la dirección y la asignamos a una variable
    var address = $('#address').val();
    // Creamos el Objeto Geocoder
    var geocoder = new google.maps.Geocoder();
    // Hacemos la petición indicando la dirección e invocamos la función
    // geocodeResult enviando todo el resultado obtenido
    geocoder.geocode({ 'address': address}, geocodeResult);
});

function geocodeResult(results, status) {
    // Verificamos el estatus
    if (status == 'OK') {
        // Si hay resultados encontrados, centramos y repintamos el mapa
        // esto para eliminar cualquier pin antes puesto
        var mapOptions = {
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map($("#map_canvas").get(0), mapOptions);
        // fitBounds acercará el mapa con el zoom adecuado de acuerdo a lo buscado
        map.fitBounds(results[0].geometry.viewport);
        // Dibujamos un marcador con la ubicación del primer resultado obtenido
        var markerOptions = { position: results[0].geometry.location }
        var marker = new google.maps.Marker(markerOptions);
        marker.setMap(map);
    } else {
        // En caso de no haber resultados o que haya ocurrido un error
        // lanzamos un mensaje con el error
        alert("Geocoding no tuvo éxito debido a: " + status);
    }
}

Y en el Body solamente esto:

<div><input type="text" maxlength="100" id="address" placeholder="Dirección" /> <input type="button" id="search" value="Buscar" /></div><br/>
<div id='map_canvas' style="width:600px; height:400px;"></div>

Espero les sirva y cualquier cosa, ya saben cómo contactarme…

Enjoy this Life!