Geolocalización del navegador

LMSGI

En esta entrada vamos a desarrollar una aplicación web que muestre los datos de geolocalización del usuario y su ubicación en un mapa que se actualiza si detecta cambio de posición.

Cálculo de coordenadas

Para determinar las coordenadas del usuario, hay que hacer uso de la funcionalidad del navegador navigator.geolocation. Primero hay que asegurase de que el navegador soporta la geolocalización y, en caso afirmativo llamar al método getCurrentPosition() cuya función callback de éxito recibe como parámetro un objeto con la información de la latitud y la longitud. Para que la geolocalización pueda llevarse a cabo, el usuario tiene que otorgar permiso a la página. 

function startGeolocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        altert('Este navegador no soporta geolocalización');
    }
}
function success(position) {
    var latitud = position.coords.latitude;
    var longitud = position.coords.longitude;
}
function error(err) {
    alert(err.message);
}

De esta manera, las variables latitud y longitud recogen respectivamente el valor en grados sexagesimales de la latitud y la longitud del usuario.

Actualización de coordenadas

Para ello necesitamos otro método de navigator.geolocation llamado watchPosition(), que es funciona de manera análoga a getCurrentPosition() con la salvedad de que la función de controlador queda registrada para invocarse automáticamente cada vez que la posición del dispositivo cambia. El método devuelve un valor de ID de seguimiento que se puede utilizar para anular el controlador pasándolo al método clearWatch().

function startGeolocation() {
    if (navigator.geolocation) {
        id = navigator.geolocation.watchPosition(success, error, options);
    } else {
        altert('Este navegador no soporta geolocalización');
    }
}
function success(position) {
    var latitud = position.coords.latitude;
    var longitud = position.coords.longitude;
}
function error(err) {
    alert(err.message);
}
var options = {
    enableHighAccuracy: false,
    timeout: 5000,
    maximumAge: 0
};

Enlace con Google Maps

Con el método anterior podemos determinar la posición que ocupa el usuario en un momento determinado, pero ¿qué pasaría si quisiésemos actualizar la ubicación según se vaya moviendo?

Mediante un elemento iframe modificando dinámicamente los parámetros del atributo src podemos visualizar la posición calculada en un mapa de Google Maps.

Para simular lo máximo posible una aplicación real, se ha creado un proyecto en Google Cloud Platform para generar una API key asociada al enlace con Google Maps. De esta manera podemos controlar el tráfico de la aplicación.

Probando la aplicación

Es importante señalar que no es posible acceder a los métodos getCurrentPosition() y watchPosition() desde un servidor no seguro, por lo que las pruebas en remoto se deben hacer desde un servidor con certificado https.

Servidor no seguro no permite geolocalización
Servidor https sí permite geolocalización

Bibliografía