Geocode – Alejandro Franco

Geocode Inverso: Buscar direcciones a partir de Coordenadas con GMaps API v3

Alex Franco — Tue, 30 Oct 2012 22:46:03 +0000

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í.

En un post anterior, vimos cómo hacer un Geocode Simple, donde obteníamos las coordenadas a partir de una dirección dada, es decir, podríamos poner cualquier combinación de calles, colonias, ciudad, etc. y obtener las coordenadas de esa dirección para colocarlas en un mapa. En este caso es al contrario, buscar direcciones (de acuerdo a la base de datos de Google) a partir de coordenadas.

Lo que haremos se resume en: escribir coordenadas (latitud, Longitud), 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.

Al igual que el ejemplo anterior, es necesario crear un objeto Geocoder, que nos permitirá hacer la interpretación de lo que intentemos buscar.

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

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 codeLatLng() {
   var input = $('#latlng').val();
   var latlngStr = input.split(',', 2);
   var lat = parseFloat(latlngStr[0]);
   var lng = parseFloat(latlngStr[1]);
   var latlng = new google.maps.LatLng(lat, lng);
   geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
         if (results[0]) {
            map.fitBounds(results[0].geometry.viewport);
            marker.setMap(map);
            marker.setPosition(latlng);
            $('#address').text(results[0].formatted_address);
            infowindow.setContent(results[0].formatted_address);
            infowindow.open(map, marker);
            google.maps.event.addListener(marker, 'click', function(){
               infowindow.setContent(results[0].formatted_address);
               infowindow.open(map, marker);
            });
         } else {
            alert('No results found');
         }
      } else {
         alert('Geocoder failed due to: ' + status);
      }
   });
}

Los primeros 4 renglones de la función realizan la validación y separación de latitud y longitud, para poder formar el objeto latLng, 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í:

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker();

function closeInfoWindow() {
      	infowindow.close();
   }

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(20.68009, -101.35403);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: 'roadmap'
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  google.maps.event.addListener(map, 'click', function(){
        	closeInfoWindow();
     	  });
}

function codeLatLng() {
  var input = $('#latlng').val();
  var latlngStr = input.split(',', 2);
  var lat = parseFloat(latlngStr[0]);
  var lng = parseFloat(latlngStr[1]);
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
		map.fitBounds(results[0].geometry.viewport);
                marker.setMap(map);
                marker.setPosition(latlng);
		$('#address').text(results[0].formatted_address);
		infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
		google.maps.event.addListener(marker, 'click', function(){
            infowindow.setContent(results[0].formatted_address);
	        infowindow.open(map, marker);
        });
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
}

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

Y en el Body solamente esto:


   


   


   Dirección:

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

Enjoy this Life!

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

Alex Franco — Mon, 27 Jun 2011 01:29:33 +0000

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);