La API de Geolocalización a fondo

Cuando allá lejos en el tiemplo hablamos de la Geolocalización con HTML5 comentamos de qué se trataba pero no ahondamos en un ejemplo, creo que es un buen momento entonces para hacerlo.

Lo primero que debemos comprender es que la "Geolocation API" es un estándar impulsado por el W3C y como tal, toda aplicación que hagamos que cumpla con este estándar va a funcionar en todo dispositivo que lo respete, así, hoy en día la mayoría de los browsers soportan la interfaz en cuestión (excepto IE) y nos permite su uso.

Para comenzar, el objeto en cuestión que vamos a conocer se encuentra debajo de navigator, se llama geolocation y tiene un método principal llamado getCurrentPosition

navigator.geolocation.getCurrentPosition(fnOK, fnError, objOpciones);

El método getCurrentPosition recibe además tres parámetros, una función a ejecutar en caso que todo haya salido bien, una a ejecutar cuando las cosas no salieron de la forma en que lo esperábamos y por último un objeto Javascript con algunas opciones que se pueden configurar (más en breve). Es importante destacar que sólo el primero de los parámetros es obligatorio.

Este método obtiene la posición geográfica del usuario y ejecuta la función que aquí hemos decidido llamar fnOK con un parámetro, un objeto del tipo Position que recibe las coordenadas obtenidas.

function fnOK(Posicion) {
    document.getElementById('Latitud').innerHTML = Posicion.coords.latitude;
    document.getElementById('Longitud').innerHTML = Posicion.coords.longitude;
}

Tan sencillo como eso y con esta simple función ya logramos tener en un SPAN, DIV o lo que querramos dibujadas nuestras coordenadas geográficas.

El objeto Posicion tiene otros atributos que completan la información de posicionamiento y que dependiendo de la implementación pueden ser de mayor o menor utilidad:

Atributo	Descripción
latitude	Latitud expresada en grados decimales
longitude	Longitud expresada en grados decimales
altitude	Altitud expresada en metros.
accuracy	Nivel de exactitud de la lectura de longitud y latitud, medida en metros
altitudeAccuracy	Nivel de exactitud de la lectura de altitud medida en metros.
heading	Dirección en que nos dirijimos, en grados respecto al Norte.
speed	Velocidad a la que estamos viajando.

Avanzando un poco más en nuestra implementación debemos pensar que sucede si algo falla y en este caso es bastante posible que lo haga ya que la disponibilización de la información geográfica es una decisión del usuario, cuando entramos a un sitio que hace uso de los métodos que aquí describimos el usuario verá un mensaje de alerta al respecto y el browser le preguntará si desea compartir su información.

function fnError(error) {
    alert('Error occurred. Error code: ' + error.code);
}

La función fnError recibe un objeto que contiene el código de error correspondiente:

Código	Descripción
0	Error Desconocido - Cualquier causa que no cuadra dentro de los restantes códigos de error.
1	Permiso Denegado - El usuario no aceptó compartir su posición.
2	Posición no Disponible - Ocurrió un fallo al intentar obtener la posición, puede ser un fallo de hardware por ejemplo.
3	Time Out - Similar al anterior pero en este caso falló por time out, es decir, todo estaba dado para obtener la posición pero al cabo de un tiempo prodencial no se pudo cumplir con el pedido.

Finalmente, el último de nuestros parámetros originales es el objeto que nos permite definir configuraciones a la forma en que trabaja nuestra API:

Atributo	Descripción
enableHighAccuracy	Un valor boolean que determina si queremos que nuestra lectura tenga una mayor precisión. Este valor puede o no hacer alguna diferencia y dependerá del hardware.
timeout	Cuánto tiempo podemos esperar antes de decir que la llamada falló por timeout. Expresado en milisegundos.
maximumAge	Dado que las lecturas de posición se pueden cachear, este valor determina la antigüedad máxima que una entrada de cache puede tener. Expresada en milisegundos.

Traduciendo esto entonces a nuestro ejemplo original:

var objOpciones = {enableHighAccuracy:true, maximumAge:30000, timeout:27000};

Suficiente por hoy, en próximas entregas voy a seguir mostrando las alternativas que ofrece esta API. Por lo pronto los dejo con un ejemplo de cómo podría ser una integración con Google Maps, espero que lo disfruten:

function fnOK(posicion) {
	var latlng = new google.maps.LatLng(posicion.coords.latitude, posicion.coords.longitude);
	var myOpciones = {
		zoom: 15,
		center: latlng,
		mapTypeControl: false,
		navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var mapa = new google.maps.Map(document.getElementById("myMapa"), myOpciones);

	var marker = new google.maps.Marker({
		position: latlng,
		map: mapa,
		title:"Aca estas!"
	});
}

if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(fnOK);
} else {
	alert('No se puede utilizar GeoLocation en este navegador');
}