⇪

Geolocalización básica

facebook-svg gplus-svg twitter-svg

La API ( Application Programming Interface ) de geolocalización permite al usuario compartir su ubicación con las aplicaciones web.
Por razones de seguridad, el navegador pide permiso para utilizar la ubicación del usuario, y la posición no está disponible a menos que el usuario lo aprueba.

Una primera prueba

A continuación vamos a realizar una prueba para ver de que va la geolocalización. En el HTML ( un HTML minimalista ) hay un enlace hacia un archivo externo de JavaScript ( geo.js )  y un <div id = "ubicacion"> 


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="geo.js"></script>
</head>
<body>
	<div id="ubicacion">
		Tus coordenadas aparecerán aquí 
	</div>
</body>

Ahora vamos a crear geo.js

Cuando la página esté cargada ( window.onload ) el  JavaScript llama la función miUbicacion().

window.onload = miUbicacion;

Si los servicios de geolocalización están disponibles ( if(navigator.geolocation) ) vamos a utilizar el método getCurrentPosition() ( literalmente: traiga la ubicación actual ) para... obtener la ubicación actual.
La función muestraMiUbicacion() es un gestor ( handler ) que será llamado si hay éxito. El gestor devuelve un objeto que almacena la posición actual: la latitud: posicion.coords.latitude  y la longitud: posicion.coords.longitude entre otras.
La posición actual saldrá como contenido ( innerHTML ) en el <div id="ubicacion">


// llama la función miUbicacion cuando la página este cargada
window.onload = miUbicacion;

function miUbicacion(){
		//Si los servicios de geolocalización están disponibles
		if(navigator.geolocation){
		// Para obtener la ubicación actual llama getCurrentPosition.
		navigator.geolocation.getCurrentPosition( muestraMiUbicacion );
		}else{ //de lo contrario
		alert("Los servicios de geolocalizaci\363n  no est\341n disponibles");
		}
}
function muestraMiUbicacion(posicion){
		var latitud = posicion.coords.latitude
		var longitud = posicion.coords.longitude
		var output = document.getElementById("ubicacion");
		output.innerHTML = "Latitud: "+latitud+"  Longitud: "+longitud;
}

Cuando ejecutamos por la primera vez el app ( de application ) de geolocalización, el navegador nos pide permiso para utilizar nuestra ubicación. Podemos, naturalmente, denegar el permiso, pero suponiendo que estamos de acuerdo, en unos cuantos segundos el contenido ( innerHTML ) del <div id="ubicacion"> cambiará, y podremos ver las coordenadas de nuestra ubicación ( latitud y longitud ).

El formato en el que aparecen es por defecto es DDD ( Decimal degrees ). Veremos más tarde como cambiarlas para que aparezcan en grados minutos y segundos.

Tus coordenadas aparecerán aquí

OJO: Google Chrome ya no soporta la utilización de la API HTML5 de Geolocalización en páginas no seguras, es decir que no utilizan conexiones cifradas (HTTPS). Si esta demostración no funciona en su navegador, puede ver esta demostración en codepen.io.

¿Qué problemas pueden aparecer?

Podemos encontrarnos con que el usuario utiliza un navegador muy antiguo, o que el usuario denegó el permiso para utilizar su ubicación. Cabe la posibilidad que la posición del dispositivo no pude ser determinada, o que se agotó el tiempo de espera permitido.
Para entender las problemas que pueden aparecer y como salir con elegancia de esto – siga leyendo....

La geolocalización parece no funcionar en Firefox para Mac o Linux. Este es un enlace que nos permite verificar si la geolocalización funciona en el navegador que utilizamos: http://html5demos.com/geo