Obtener la dirección a partir de unas coordenadas

En ocasiones puede ser interesante saber a que dirección pertenecen unas coordenadas. Por ejemplo podemos estar programando una aplicación que recoge las coordenadas donde nos encontramos y nos interesa saber a que dirección corresponde.

Para conseguir esto debemos echar mano de Google Maps Geodecoder.

Como siempre la mejor forma de verlo es con un ejemplo, así que vamos a crear un mapa y añadirle un marcador arrastrable,  cuando se arrastre  el marcador a una posición recogemos las coordenadas donde esta situado el marcador y sacamos un alert con la dirección.

El código completo sería este:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Obtener Dirreción</title>
<meta charset="utf-8" />
< script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
< script>
function initMap() { 
 // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar.
 var map = new google.maps.Map(document.getElementById('mapa'), {
 center: {lat: 43.2686751, lng: -2.9340005},
 scrollwheel: false,
 zoom: 8,
 zoomControl: true,
 rotateControl : false,
 mapTypeControl: true,
 streetViewControl: false,
 });
 // Creamos el marcador
 var marker = new google.maps.Marker({
 position: {lat: 43.2686751, lng: -2.9340005},
 draggable: true 
 });
 // Le asignamos el mapa a los marcadores.
 marker.setMap(map); 
 // creamos el objeto geodecoder 
 var geocoder = new google.maps.Geocoder(); 
// le asignamos una funcion al eventos dragend del marcado
 google.maps.event.addListener(marker, 'dragend', function() {
 geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 var address=results[0]['formatted_address'];
 alert(address);
 }
 });
});
}
</script>
</head>
<body onload="initMap()">
 <h1>Obtener Dirección</h1>
 < div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

Como vemos, después de crear el mapa y añadirle el marcador creamos el objeto geodecoder.

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

Después al marcador le asignamos la función que se ejecutara en el evento dragend, es decir, cuando se suelte el marcador después de arrastrarlo.
Dentro de esta función geodecoder.geodecode() pasandole como primer parámetro un objeto con las coordenadas, en este caso las del marcador {‘latLng’: marker.getPosition()}, y como segundo parametro una función callback anonima que recibe como parametros results y status.

Si status es igual a google.maps.GeocoderStatus.OK, es decir,  se ha recibido correctamente la dirección mostramos la dirección que se encuentra en results[0][‘formatted_address’]

La estructura completa del objeto que recibimos seria esta:

{
 "results": [ {
 "types": street_address,
 "formatted_address": "Etorbidea Abandoibarra, 2, 48001 Bilbo, Bizkaia, España",
 "address_components": [ {
 "long_name": "2",
 "short_name": "2",
 "types": street_number
 }, {
 "long_name": "Etorbidea Abandoibarra",
 "short_name": "Etorbidea Abandoibarra",
 "types": route
 }, {
 "long_name": "Bilbo",
 "short_name": "Bilbo",
 "types": [ "locality", "political" ]
 }, {
 "long_name": "Bizkaia",
 "short_name": "BI",
 "types": [ "administrative_area_level_2", "political" ]
 }, {
 "long_name": "Euskadi",
 "short_name": "PV",
 "types": [ "administrative_area_level_1", "political" ]
 }, {
 "long_name": "España",
 "short_name": "ES",
 "types": [ "country", "political" ]
 }, {
 "long_name": "48001",
 "short_name": "48001",
 "types": postal_code
 } ],
 "geometry": {
 "location": {
 "lat": 43.26861,
 "lng": -2.934380000000033
 },
 "location_type": "ROOFTOP",
 "viewport": {
 "southwest": {
 "lat": 43.26726101970851, 
 "lng": -2.9357289802915147
 },
 "northeast": {
 "lat": 43.26995898029151,
 "lng": -2.933031019708551
 }
 }
 }
 } ]
}

En address_components podemos encontrar todos los elementos que componen la dirección por separado.

Para facilitar la obtención de un elemento de la dirección podemos construir una función como esta:

function getAddressComponent(address,component)
{
 var components = address[0]['address_components'];
 
 for (var i in components)
 {
 if(components[i]['types'].indexOf(component)>-1)
 {
 return components[i]['long_name'];
 }
 }
 return false;
}

Como primer parámetro pasaremos la variable results que recibimos en la función geocoder.geocode(), y como segundo parámetro el componente que queremos extraer.

Por ejemplo si queremos mostrar el código postal llamaríamos a la función de la siguiente manera:

alert(getAddressComponent(results,postal_code));

Para más información sobre cómo crear mapas:

Mostrar un mapa interactivo de Google Maps

Para saber más sobre como crear marcadores:

Añadir marcadores a Google Maps

Índice   –   <– Capítulo Anterior   –  Capitulo Siguiente –>

Anuncios

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