Una de las principales novedades de HTML5 fue la aparición de nuevas APIs de Javascript que aumentan la potencia de este lenguaje.

Una de ellas es la nueva API de geolocalización, que nos permite conocer la ubicación geográfica del usuario, siempre y cuando esté usando un navegador que la tenga implementada y que el usuario dé su permiso.

Aunque la primera impresión sea que sólo será útil para usuarios de navegadores móviles, la realidad es que éste utiliza otros medios además del GPS para calcular la ubicación del usuario, como por ejemplo a través de su dirección IP.

Navegadores que soportan el API de geolocalización

Antes de nada debemos saber qué navegadores soportan esta funcionalidad. En la siguiente tabla podemos verlo:

Antes de empezar a usar el API de geolocalización tendremos que comprobar que el navegador la soporta:

if (navigator.geolocation)
{
	// Código de la aplicación
}
else
{
	// No hay soporte para la geolocalización: podemos desistir o utilizar algún método alternativo
}

La función navigator.geolocation.getCurrentPosition

La ubicación del usuario se obtiene a través de la siguiente función:

navigator.geolocation.getCurrentPosition(funcExito, funcError, opciones);

Esta función tiene tres parámetros (los dos últimos opcionales):

1. funcExito: función de retorno que se ejecutará si se obtiene la posición. Se le pasará como parámetro un objeto Position.
2. funcError: función de retorno que se ejecutará si no se obtiene la posición. Se le pasará como parámetro un objeto PositionError.
3. opciones: un objeto PositionOptions con parámetros para la obtención de la localización.

La función intentará obtener la posición del usuario. Si lo consigue llamará a la función que le pasemos como primer parámetro pasándole un objeto Position con esos datos. Si, por el contrario, no lo consigue, llamará a la función que le pasemos como segundo parámetro pasándole un objeto PositionError que indicará la razón por la que no lo ha conseguido.

El objeto Position

Es el objeto que nos indicará la ubicación del usuario si el navegador puede determinarla. Este objeto consta de los siguientes atributos:

De todos los atributos sólo coords.latitude, coords.longitude y coords.accuracy es seguro que tendrán valor. Los otros dependen de las aptitudes del dispositivo que esté usando el usuario.

El objeto PositionError

Es el objeto que nos indicará la causa por la que no se ha podido determinar la ubicación del usuario. Este objeto consta de dos atributos: code y message. De estos el que nos interesa es code que será el que nos indique el error de forma más eficiente (message hace lo mismo pero con una cadena explicativa del error).

Los posibles valores del atributo code son:

El objeto PositionOptions

Es el objeto que nos permitirá poner algunas condiciones a la obtención de la ubicación del usuario. Este objeto consta de los siguientes atributos:

Hay que tener en cuenta que algunos dispositivos tienen distintos métodos para obtener la posición si enableHighAccuracy está activado y si está desactivado, con lo es posible que una llamada a getCurrentPosition con esta opción activada dé error mientras que puede tener exito con ella desactivada.

Obtener la posición del usuario

Veamos ahora el código para obtener la posición del usuario con: comprobación de si el navegador soporta geolocalización, recogida de los datos de latitud y longitud, control de errores y pasándole las opciones de tiempo máximo de espera y antigüedad.

(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.";
	}
})();

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

Obtener la posición del usuario cada vez que ésta cambie

Si en lugar de querer obtener la ubicación del usuario puntualmente queremos recibir información actualizada cada vez que esta cambie, en lugar de usar la función navigator.geolocation.getCurrentPosition, usaremos navigator.geolocation.watchPosition. Los parámetros a pasar a esta función son exactamente los mismos que para la anterior, con la salvedad de que si bien la anterior no devuelve ningún valor, esta devolverá un identificador con el que podemos parar las actualizaciones de ubicación. Podemos, por ejemplo, hacer que el usuario pare manualmente las actualizaciones desde un botón. Se haría de la siguiente forma:

var watch_id = navigator.geolocation.watchPosition(function(objPosition)
{
	// Procesar posición
}, function(objPositionError)
{
	// Procesar errores
}, {
	maximumAge: 75000,
	timeout: 15000
});

document.getElementById("stop-button").onclick = function()
{
	navigator.geolocation.clearWatch(watch_id);
};