Archivo de la etiqueta: obtener direccion mapa

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