Ardilla Quio Ardilla Quio

24 de Septiembre de 2013

Obtener dirección postal con las coordenadas geográficas

En un artículo anterior vimos cómo obtener la ubicación geográfica del usuario con la API de geolocalización de HTML5. En este artículo vamos a profundizar en ese tema viendo cómo, a través de la latitud y longitud obtenidas, podemos conocer la dirección real del usuario.

Para conseguirlo, usaremos el Servicio de Codificación Geográfica de la API de Google Maps.

Empecemos por recordar el código para obtener la latitud y la longitud del anterior artículo:

(function(){
	var content = document.getElementById("geolocation-test");

	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(function(objPosition)
		{
			var lon = objPosition.coords.longitude;
			var lat = objPosition.coords.latitude;

			content.innerHTML = "<p><strong>Latitud:</strong> " + lat + "</p><p><strong>Longitud:</strong> " + lon + "</p>";

		}, function(objPositionError)
		{
			switch (objPositionError.code)
			{
				case objPositionError.PERMISSION_DENIED:
					content.innerHTML = "No se ha permitido el acceso a la posición del usuario.";
				break;
				case objPositionError.POSITION_UNAVAILABLE:
					content.innerHTML = "No se ha podido acceder a la información de su posición.";
				break;
				case objPositionError.TIMEOUT:
					content.innerHTML = "El servicio ha tardado demasiado tiempo en responder.";
				break;
				default:
					content.innerHTML = "Error desconocido.";
			}
		}, {
			maximumAge: 75000,
			timeout: 15000
		});
	}
	else
	{
		content.innerHTML = "Su navegador no soporta la API de geolocalización.";
	}
})();

Ahora lo que tenemos que hacer es añadir la API de Google Maps. Para eso, en el HTML de nuestra página web, añadiremos lo siguiente:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Con esto ya podremos trabajar con los servicios del API de Google Maps. El que nos interesa es el Servicio de Codificación Geográfica (google.maps.Geocoder). Lo que tenemos que hacer es inicializar el servicio y llamar a la función geocode pasándole como parámetro un objeto google.maps.LatLng creado con los datos de latitud y longitud que obtuvimos con el código anterior.

Así quedaría el código:

(function(){
	var content = document.getElementById("geolocation-test");

	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(function(objPosition)
		{
			var lon = objPosition.coords.longitude;
			var lat = objPosition.coords.latitude;

			var dir = "";
			var latlng = new google.maps.LatLng(lat, lon);
			geocoder = new google.maps.Geocoder();
			geocoder.geocode({"latLng": latlng}, function(results, status)
			{
				if (status == google.maps.GeocoderStatus.OK)
				{
					if (results[0])
					{
						dir = "<p><strong>Dirección: </strong>" + results[0].formatted_address + "</p>";
					}
					else
					{
						dir = "<p>No se ha podido obtener ninguna dirección en esas coordenadas.</p>";
					}
				}
				else
				{
					dir = "<p>El Servicio de Codificación Geográfica ha fallado con el siguiente error: " + status + ".</p>";
				}

				content.innerHTML = "<p><strong>Latitud:</strong> " + lat + "</p><p><strong>Longitud:</strong> " + lon + "</p>" + dir;
			});
		}, function(objPositionError)
		{
			switch (objPositionError.code)
			{
				case objPositionError.PERMISSION_DENIED:
					content.innerHTML = "No se ha permitido el acceso a la posición del usuario.";
				break;
				case objPositionError.POSITION_UNAVAILABLE:
					content.innerHTML = "No se ha podido acceder a la información de su posición.";
				break;
				case objPositionError.TIMEOUT:
					content.innerHTML = "El servicio ha tardado demasiado tiempo en responder.";
				break;
				default:
					content.innerHTML = "Error desconocido.";
			}
		}, {
			maximumAge: 75000,
			timeout: 15000
		});
	}
	else
	{
		content.innerHTML = "Su navegador no soporta la API de geolocalización.";
	}
})();

Resultados devueltos por el Servicio de Codificación Geográfica

El Servicio de Codificación Geográfica suele devolver más de un resultado, normalmente direcciones de más a menos específicas. Es decir, previsiblemente el primer resultado especificará el número aproximado, la calle, la ciudad y el país; mientras que el último sólo mostrará el país.

Y en el siguiente cuadro podemos ver el resultado de este script aplicado en esta página:

El script aún no se ha ejecutado.

27 comentarios

Anónimo

17/03/2018 00:39:25

alguno de ustedes tendra el codigo funcionando de este ejercicio que me pudiera facilitar a dracomxmx@yahoo.com.mx gracias

javier soto avila

25/02/2017 22:41:23

disculpa si tengo 100 choferes por decir un número en la bd en My SQL tengo sus ID y No de teléfono celular sería posible saber la ubicación de ellos con este código o saber quien anda más cerca.? o podrias echarme la mano con un código para esto !!

Miquel Garcia

10/11/2016 14:09:52

Hola, necesito obtener un listado de comercios ordenados por proximidad a un código postal determinado. Por supuesto estos comercios estarían en una tabla con sus correspondientes códigos postales.

Fernando Gabriel S

24/10/2016 17:49:56

No les funciona porque Chrome desactivó la geolocalización en el navegador, necesitarán usar otro navegador o mplementar ssl en su sitio para que funcione.

Anónimo

16/10/2016 16:39:56

Hola.

Yo tengo un par de coordenadas y lo único que necesito es que de cada par de coordenadas me indique en que país se encuentran?. Alguien por favor me puede ayudar con esto?

Gracias.

franco

05/09/2016 20:24:13

Hola ! no logro hacerlo funcionar, alguien tiene el codigo completo en html con el que lo hizo funcionar?

Lucas Correa 709

17/02/2016 17:29:04

AYUDA! No me funciona. Osea yo quiero saber mi "dirección postal".. AYUDA PORFA !!

Lucas Correa 709

17/02/2016 17:29:03

AYUDA! No me funciona. Osea yo quiero saber mi "dirección postal".. AYUDA PORFA !!

IngLuis

28/11/2015 20:57:15

Eres el mejor, realmente me funciona a la perfección, lo busque por todos lados y no lo encontraba.

Anónimo

13/10/2015 07:21:51

Deseo obtener el codigo completo ya que no me funciona gracias luiizkrojaz@gmail.com

Anónimo

07/10/2015 19:53:07

a mi no me funciona

Anónimo

27/08/2015 06:37:04

Buenas noches, estoy tratando de hacer una pagina que rastree diversos dispositivos, como celulares, tablets y laptops, la idea es que mis clientes ingresen el imei o serie y yo pueda brindarles el servicio de geolocalizacion.

llevo mas de un año buscando la forma o bien si hay un código HTML que me puedan brindar de verdad de verdad se los agradecería.

mi correo es carlosmaa25@gmail.com

gracias

David Guerra

07/08/2015 00:41:43

Hola, estoy haciendo una pagina web, y la verdad no se mucho, pero lo que necesito es que cuando alguien visita mi pagina desde cualquier dispositivo, a mi me llegue un email con su ubicación. Alguien puede ayudarme? gracias

David Guerra

07/08/2015 00:16:35

Hola, estoy haciendo una pagina web, y la verdad no se mucho, pero lo que necesito es que cuando alguien visita mi pagina desde cualquier dispositivo, a mi me llegue un email con su ubicación. Alguien puede ayudarme? gracias

Anónimo

03/06/2015 15:30:01

Hola!! necesito el codigo de este mapa

http://www.arumeinformatica.es/utiles/buscar-coordenadas-...

necesito el codigo que cuando tu cambies de lugar te des las coordenadas.

Muchas gracias!!!!!

Wilson

07/03/2015 06:05:50

Perfecto con la solución de Belex me funciono, pero al final de la pagina me sale el siguiente mensaje

Esperando a maps.googleapis.com...

Y es como si la pagina no estaria completamente cargada, y es un poco molesto por que distrae la vista, cualquier sugerencia es bienvenida, muchas gracias por el manual muy bueno.

Wilson

07/03/2015 05:45:12

Hola, alguien tiene el script completo en html por favor ya que no puedo hacerlo funcionar, gracias de antemano.

Belex

25/11/2014 19:53:35

A mi tampoco me quedaba, pero testee el código en un archivo limpio y funcionó de maravilla, el <div id="geolocation-test"> </div> lo puse antes del script y el API lo coloqué en el header.

Gracias por el aporte me sirvió mucho :D !!

Axfisiao

17/11/2014 14:46:06

Pues no he podido hacerlo funcionar, he copiado en la cabecera la conexión con el API y luego he abierto un par nuevo de etiquetas en la cabecera de tipo <script> para almacenar el resto del código.

Si que solicita el permiso pero no me pinta los datos en ningún lado.

Analizando el código la posibilidad de pintar en la pagina los datos están en todo el apartado en rojo pero no consigo que funcione ni siquiera publicándola en un servidor ¿alguien podría pasarme el código ya implementado en una página?

Alex

30/09/2014 15:08:05

Amigo, me puede indicar como tomo la ciudad real de donde se esta abriendo una página web?. Gracias

Yair Garcia

30/09/2014 14:57:28

Buenos días, este código es justo lo que necesito para mi proyecto, pero en que parte copio el código, mi página la estoy haciendo en C#, ¿si me serviría?. Muchas gracias.

Mauricio

03/07/2014 16:46:49

Simón debes ejecutarlo en un servidor o en tu localhost.

Simon

16/05/2014 05:16:34

Hola no me muestra nada el codigo en html como seria?

ya que cree un div con id geolocation-test y llame el script de google maps

Luis

22/02/2014 08:38:15

Hola leon.

Eso puedes verlo aquí: http://www.arumeinformatica.es/utiles/buscar-coordenadas-...

Un saludo.

leon

22/02/2014 02:16:58

hmm...yo lo quería al revés , dar la dirección o población y que me de las coordenadas jeje

Anónimo

21/10/2013 18:09:35

muy bonito

Anónimo

25/09/2013 15:33:04

Funciona

Comentario anónimo
Comentar como usuario