31

7

Geolocalización con JavaScript

Desde casi la primera aparición de los mercados de aplicaciones móviles, la geolocalización ha sido una característica ampliamente usada para ayudarnos a descubrir locales, sugerirnos actividades y ayudarnos a orientarnos.
Primero se empezó con el GPS, luego se usó la triangulación de redes WiFi y finalmente la triangulación de antenas móviles. Incluso si disponemos de una buena base de datos es posible localizar un dispositivo según la IP que utiliza.

Estas tecnologías han ido llegando progresivamente a los navegadores web, hasta llegar a convertirse en una de las propuestas a estándar más apoyadas de HTML5. Se trata de una interfaz muy sencilla mediante la cual podemos obtener las coordenadas del dispositivo que use nuestra web o aplicación.

Una API con permisos

Para poder obtener la posición exacta de un usuario primero necesitamos su permiso. Al contrario de otros métodos como la localización por IP donde podríamos saber dónde se encuentra mediante un script en el servidor, aquí tendremos que ser más transparentes y mostrar al menos que estamos recibiendo más información de la habitual.

Obtener los permisos para la geolocalización es muy fácil, mucho más que para poder crear notificaciones web, por ejemplo. De hecho, cuando intentamos acceder al objeto geolocation el navegador se lo notifica automáticamente al usuario para que decida qué hacer.

Como el usuario tiene la opción de deshabilitar la localización mediante Javascript, es importante no crear aplicaciones que requieran obligatoriamente esta característica. Es útil para ofrecer una experiencia mejor al usuario, pero si queremos, por ejemplo, localizar de dónde nos viene una visita (para un uso estadístico) lo mejor es tratar de obtener la información usando un lenguaje del lado del servidor.

Obteniendo las coordenadas del dispositivo

Obtener las coordenadas de un usuario, siempre que nos lo permita, es muy sencillo. Simplemente usando el método getCurrentPosition accederemos a toda la información que esté disponible en el momento:

1. if(navigator.geolocation){

var success = function(position){

var latitud = position.coords.latitude,

    longitud = position.coords.longitude;

}

navigator.geolocation.getCurrentPosition(success, function(msg){

console.error( msg );

});

2. }

Es importante comprobar que el navegador donde estamos ejecutando el script tiene implementada la localización para no generar errores y evitar problemas.

El método getCurrentPosition admite hasta tres parámetros. Los dos primeros tienen que ser funciones (callbacks), la primera se encarga de realizar las tareas necesarias una vez conseguido el permiso del usuario.

La segunda función se lanza cuando hay algún error de ejecución, por ejemplo si el usuario deniega el permiso.

Uso de las coordenadas para mostrar un mapa

A partir de las coordenadas que hemos obtenido, lo más fácil es usar Google Maps o un servicio parecido para mostrar un mapa centrado en la ubicación del usuario. Lo primero es incluir un enlace a la API del servicio que queremos usar. En el caso de Google Maps:

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

Luego tenemos que incluir en el HTML una capa que contendrá nuestro mapa:

1. <div id="mapcanvas" style="width:400px; height:400px"></div>

Ahora solo tenemos que modificar nuestra función success para que reciba el mapa que queremos.

1. var success = function(position){

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

var myOptions = {

zoom: 15,

center: latlng,

mapTypeControl: false,

navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions)

var marker = new google.maps.Marker({

position: latlng,

map: map,

title:"Estás aquí! (en un radio de "+position.coords.accuracy+" metros)"

})

2. }

En este código también usamos la variable position.coords.accuracy. Es una medida en metros de la precisión de la localización. Es posible intentar mejorar la precisión usando el tercer argumento de la función getCurrentPosition.

Opciones de .getCurrentPosition

La función getCurrentPosition acepta un tercer argumento, un objeto con las siguientes opciones:

• enableHighAccuracy (true/false): se intentará conseguir una localización más precisa, usando por ejemplo el GPS (si el dispositivo móvil nos lo permite). El valor por defecto es false.
• timeout (int): un número entero de milisegundos para establecer un límite de tiempo para intentar encontrar la localización.
• maxiumAge (int): un número entero de milisegundos, si existe una localización en caché más nueva que el tiempo especificado esta se podrá usar. Se usa en caso de no conseguir ningún dato actual.

Soporte en los navegadores

La geolocalización es una característica disponible en todas las versiones actuales de Chrome, Safari y Firefox; todas las versiones móviles de Safari, Blackberry, Android, Chrome y Firefox; Internet Explorer 9+; y Opera a partir de la versión 10.6 (la 15.0 parece que no admite geolocalización). Según CanIuse.

Resumen

Está claro que esta API para Javascript (al igual que otras como la File API o el Drag&Drop) son el camino para lograr que las aplicaciones web estén a la altura de cualquier lenguaje de escritorio, tanto en funcionalidades como en comodidad para el usuario.