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 –>
