Cómo geolocalizar con JavaScript

Geolozalizar con JavaScript es algo relativamente fácil y sin usar servicios de terceros. Toda la magia la podemos hacer con el objeto navigator.geolocation.

El primer paso es asegurarnos de que está disponible:

if (navigator.geolocation) {
    // Buenas noticias, podemos geolocalizar
}

Ahora usamos el método getCurrentPosotion:

navigator.geolocation.getCurrentPosition(geolocalizacionPermitida, geolocalizacionDenegada);

Cuando añadimos esta línea en una web el usuario verá una notificación que le preguntará si desea compartir su ubicación.

Este método acepta dos parámetros:

• El primero, geolocalizacionPermitida, será una función (que tendremos que crear) que será la que se ejecutará si la geolocalización acepta compartir su ubicación y si ésta funciona.
• El segundo, geolocalizacionDenegada, será la función que se ejecutará si falla la geolocalización. Puede fallar, por ejemplo, porque el usuario no acepte compartir su ubicación.

La función geolocalizacionPermitida

La primera función podemos definirla así:

function geolocalizacionPermitida(position) {
    console.log(position);
}

El parámetro que recibe «mágicamente» esta función es un objeto del tipo GeolocationPosition:

GeolocationPosition​
  ​coords: GeolocationCoordinates
    ​​accuracy: 3929
    ​​altitude: null
    ​​altitudeAccuracy: null
    ​​heading: null
    ​​latitude: 40.5173122
    ​​longitude: -3.9464389
    ​​speed: null
  timestamp: 1602863793355

Nota: No vengas a buscarme a esas coordenadas que las he cambiado.

Gracias a este objeto podemos sacar las coordenadas del usuario:

function geolocalizacionPermitida(position) {
    coordenadas = {
        Latitud: position.coords.latitude,
        Longitud: position.coords.longitude
    };
    // Hacer cosas malvadas con las coordenadas
}

Recuerda, esta función solo se ejecutará si el usuario da su permiso para compartir su ubicación.

La función geolocalizacionDenegada

Esta función se puede definir así:

function geolocalizacionDenegada(error) {
    console.log(error)
}

Esta función recibe el parámetro «mágico» error, que es un objeto del tipo GeolocationPositionError:

GeolocationPositionError
  ​code: 1
  ​message: "User denied geolocation prompt"

Recuerda, esta es la función que se ejecuta si el usuario no da su permiso.

Resumen

Juntándolo todo tenemos algo así:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(geolocalizacionPermitida, geolocalizacionDenegada);
}

function geolocalizacionPermitida(position) {
    coordenadas = {
        Latitud: position.coords.latitude,
        Longitud: position.coords.longitude
    };

    console.log(position);
}

function geolocalizacionDenegada(error) {
    console.log(error)
}

Es importante tener en cuenta que las funciones geolocalizacionPermitida y geolocalizacionDenegada se llaman de manera asíncrona. Si quieres entender bien qué significa esto prueba a modificar las primeras líneas por ésto:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(geolocalizacionPermitida, geolocalizacionDenegada);
    console.log("La geolocalización está en marcha");
}

Recarga la página y verás que el mensaje «La geolocalización está en marcha» aunque no hayas dado tu permiso o hayas denegado.