El API de geolocalización de jаvascript 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. jаvascript 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 .

El API de geolocalización es soportado por todos los navegadores principales, incluido microsoft edge +, Firefox 68+, Chrome 75 + y Safari 12 +. 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 28516p

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 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 .

En otras palabras, ningún navegador forzará al 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 . La aprobación por parte del ha de ser obligatoria, sin ninguna opción de que la web puede saltársela. 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? 3z5e24

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

getCurrentPosition( successCallback, errorCallback, options ) 145x4w

El método getCurrentPosition se utiliza para acceder a la posición actual del dispositivo. Puede itir 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 5n304b

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 nw2y

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

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

Ejemplo 1c5z4q

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);
};

watchPosition( successCallback, errorCallback, options ) 2b5l48

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 );

clearWatch( watchId ) 64i3d

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 4mcj

Utilizando el Geolocation API y Google Maps API podemos mostrar la ubicación del 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.'
   });

}

Referencias 633t2g

Geolocation API specifications. W3C Recommendation.
Mark Pilgrim. «You Are Here (And So Is Everybody Else)». Dive Into HTML5, capítulo 6.