Introducción a Geolocation API de JavaScript JavaScript

  • Publicado el 5 febrero, 2015 - Actualizado el

El API de geolocalización de JavaScript permite acceder a la información de localización geográfica del dispositivo desde el que se visita una web. Esta información se obtiene de diversas fuentes, por ejemplo, de la dirección IP, de la torre de conexión móvil o de las coordenadas GPS. JavaScript puede acceder así a la latitud y longitud del dispositivo y enviarlas al servidor web dónde se pueden utilizar con fines muy diversos, la mayoría relacionados con ofrecer recursos personalizados y cercanos al usuario.

El API de geolocalización es soportado por todos los navegadores principales, incluido IE9+, Firefox 3.5+, Chrome 5.0+ y Safari 5.0+. Si estás interesado en una alternativa para navegadores y plataformas que no soporten el API de forma nativa, échale un vistazo a geolocation.js en Github.

Privacidad

Antes de meternos de lleno en el tema hagamos un alto para atender a la privacidad. Hoy en día se le da mucha importancia a la privacidad del usuario y personalmente aún creo que debería protegerse más y que queda mucho por hacer. En cuánto al Geolocation API, has de saber que es de tipo opt-in, es decir, su uso es completamente opcional y ha de ser aprobado por el usuario.

En otras palabras, ningún navegador forzará al usuario a enviar su geolocalización sin preguntar primero. El navegador ha de lanzar un aviso alertando sobre una web que quiere acceder a los datos de geolocalización, decir específicamente de que web se trata y dar las opciones de aprobar o rechazar dicho acceso. La aprobación por parte del usuario ha de ser obligatoria, sin ninguna opción de que la web puede saltársela.

El aviso en Firefox 35.0.1 tiene esta pinta:

Aviso para compartir geolocalización en Firefox
Aviso para compartir geolocalización en Firefox

Además, Chrome, Firefox y WebKit solo aceptan el uso de este API bajo HTTPS.

¿Cómo se utiliza y que información se puede obtener?

El API de geolocalización se basa completamente en la propiedad geolocation del objeto global navigator: navigator.geolocation. Este propiedad tiene tres métodos:

1

getCurrentPosition( successCallback, errorCallback, options )

El método getCurrentPosition se utiliza para acceder a la posición actual del dispositivo. Puede admitir uno, dos o tres parámetros:

  • successCallback: obligatorio. Función callback que recibe el objeto Position con la información de posición actual en caso de que se obtenga correctamente.
  • errorCallback: opcional. Función callback en caso de error. Recibe un objeto PositionError.
  • options: opcional. objecto con opciones. Entre las opciones que se pueden especificar están timeout (tiempo máximo de espera en milisegundos para recibir la información de localización. Por defecto es infinito), enableHighAccuracy (true/false, el dispositivo intentará obtener los datos más exactos posibles, puede alargar el tiempo de respuesta. Por defecto es false) y maximumAge (tiempo de caché de la información expresado en milisegundos, por defecto es cero, valor que deshabilita la caché).

El objeto Position

Hemos dicho que sucessCallback recibe un objeto Position con la información de posición actual. La información disponible en este objeto es:

  • coords.latitude: grados decimales
  • coords.longitude: grados decimales
  • coords.altitude: metros
  • coords.accuracy: metros
  • coords.altitudeAccuracy: metros
  • coords.heading: grados en sentido horario desde el norte verdadero
  • coords.speed: metros por segundo
  • timestamp: objeto Date() con la fecha y hora del dispositivo

El objecto PositionError

El objeto de error que recibe errorCallback tiene estas dos propiedades:

  • code: código de error
  • message: mensaje de error correspondiente

Ejemplo

var options = {
  enableHighAccuracy: true,
  timeout: 6000,
  maximumAge: 0
};

navigator.geolocation.getCurrentPosition( success, error, options );

function success(position) {
  var coordenadas = position.coords;

  console.log('Tu posición actual es:');
  console.log('Latitud : ' + coordenadas.latitude);
  console.log('Longitud: ' + coordenadas.longitude);
  console.log('Más o menos ' + coordenadas.accuracy + ' metros.');
};

function error(error) {
  console.warn('ERROR(' + error.code + '): ' + error.message);
};
2

watchPosition( successCallback, errorCallback, options )

El método watchPosition hace lo mismo que getCurrentPosition: registra un callback que recibe la posición y, opcionalmente, un callback en caso de error y un objeto de opciones. La diferencia es que el callback registrado por watchPosition se llama automáticamente cada vez que el dispositivo cambia de posición y genera un identificador de la operación:

var watchId = navigator.geolocation.watchPosition( success, error, options );
3

clearWatch( watchId )

Con este método se cancela el proceso iniciado con watchPosition e identificado con watchId:

//Inicia un proceso y se almacena el identificador
//en la variable watchId
var watchId = navigator.geolocation.watchPosition( success, error, options );

//Cancela el proceso
navigator.geolocation.clearWatch( watchId );

Ejemplo: mostrar ubicación actual en Google maps

Utilizando el Geolocation API y Google Maps API podemos mostrar la ubicación del usuario en mapa.

google.maps.event.addDomListener(window, 'load', mapInitialize);

function mapInitialize() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition( set_position_in_google_map );
   } else {
     alert("Tu navegador no soporta el API de geolocalización. Actualiza a un navegador más moderno.");
   }
}
function set_position_in_google_map( position ) {
  var crds = position.coords;
  var mapPosition = new google.maps.LatLng(crds.latitude, crds.longitude);
  var mapOptions = {
    zoom: 15,
    center: mapPosition
  };
  var map = new google.maps.Map(
    document.getElementById('map-canvas'),
    mapOptions
   );
   var infowindow = new google.maps.InfoWindow({
     map: map,
     position: mapPosition,
     content: 'Localización encontrada utilizando Geolocation API.'
   });

}

Demo

Para ver el demo en acción tendrás que compartir la ubicación aceptando el aviso que lanzará el navegador al ejecutar el Pen.

Referencias