API de geolocalización y javascript: cómo obtener la ubicación de un usuario

Si aspiras a convertirte en desarrollador web, es necesario tener conocimientos del lenguaje javascript. Aprender JavaScript es una de las prácticas más importantes para implementar en la búsqueda de una carrera como desarrollador web. Saber programar en JavaScript se vuelve esencial para todos los aspirantes a programadores web.

¿Javascript que es?

Es un lenguaje de scripting utilizado para hacer que los sitios web sean dinámicos. Forma parte de los tres lenguajes básicos para el desarrollo web, junto con HTML y CSS. De hecho, JavaScript gestiona el comportamiento de los elementos dinámicos de un sitio web, como el contenido (HTML) y el estilo gráfico (CSS) que reaccionan y cambian en la página web.

La programación en JavaScript pasa por una serie de conocimientos, necesarios, íntimamente relacionados con el lenguaje. Como la sintaxis, la programación orientada a eventos o la implementación en el desarrollo web.

En este artículo veremos cómo obtener la ubicación de un usuario a través de API. A menudo, muchas aplicaciones requieren acceso a la ubicación del usuario, como las aplicaciones de food delivery o las aplicaciones de reserva de taxis o car sharing. Para ello utilizaremos la API de Geolocalización, que es una solución sencilla. Puede usarse no solo para determinar la ubicación de los usuarios, sino también la moneda local, el idioma y otra información útil. Los servicios de API web se utilizan a menudo en el desarrollo web para obtener información útil del usuario.

Pero primero, profundizemos más. API rest ¿qué son?

Una API REST, también conocida como API RESTful, es una interfaz de programación de aplicaciones (API o API web) que cumple con las restricciones del estilo arquitectónico REST, que permite la interacción con los servicios web RESTful. El término REST es un acrónimo de REpresentational State Transfer. REST es un sistema de transmisión de datos que utiliza HTTP y hace uso de las funciones de HTTP, utilizando los comandos GET, POST, PUT, PATCH, DELETE y OPTIONS.

Después de haber estudiado qué son las REST APIs (o RESTful APIs), vayamos más concretamente, analizando la API de geolocalización. La API de geolocalización en el lenguaje JavaScript brinda acceso a los datos de ubicación geográfica asociados con el dispositivo de un usuario. Esto se puede determinar mediante GPS, WIFI, geolocalización IP, etc.

Para proteger su privacidad, solicita el permiso para localizar el dispositivo. Si el usuario autoriza, tendrá acceso a datos de ubicación como latitud, longitud, altitud y velocidad. También obtendrá la precisión de los datos de ubicación capturados y la hora aproximada en que se capturó la ubicación. ¿Cómo usar esta API de geolocalización?

Puedes acceder a la API de geolocalización llamando al objeto navigator.geolocation. Este comando otorga a la aplicación acceso a la ubicación del dispositivo. Mientras que el objeto proporciona los métodos enumerados a continuación para trabajar con la ubicación del dispositivo:

• getCurrentPosition: devuelve la ubicación actual del dispositivo
• watchPosition: una función de gestión que se invoca automáticamente cuando cambia la ubicación del dispositivo

Hay tres posibles argumentos asociados con estos métodos:

• Un callback positivo (obligatorio)
• Una callback de error (opcional)
• Un objeto opcional (opcional)

Ahora veamos cómo usar el getCurrentPosition(). Con el método getCurrentPosition, se puede obtener la posición actual del usuario. Envía una solicitud asíncrona al navegador, solicitando consentimiento para compartir su ubicación.

Esta es la sintaxis de JavaScript para obtener la ubicación de un usuario:

 1. const successCallback = (position) => {
 2.   console.log(position);
 3. };
 4.  
 5. const errorCallback = (error) => {
 6.   console.log(error);
 7. };
 8.  
 9. navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

Cuando ejecutas este fragmento de código, se te mostrará una ventana emergente desde el navegador para solicitar permisos para otorgar tu ubicación actual.

Al aceptar, se abrirá la consola del desarrollador. Verás que llamar a la función devuelve dos cosas:

• Objeto GeolocationPosition.coords: representa la ubicación, la altitud y la precisión con la que el dispositivo calcula estas propiedades.
• timestamp: representa la hora en que se obtuvo la ubicación.

Observando el log de la consola tendremos disponibles todos los datos obtenidos de la llamada rest-API. Después de hacer esto, podemos rastrear al usuario viendo su ubicación.

El método watchPosition() permite que la aplicación controle continuamente al usuario actualizándose a medida que cambia su posición. Lo hace mediante la instalación de una función de administración que se llamará automáticamente cada vez que cambie la ubicación del dispositivo del usuario.

Aquí está la sintaxis en JavaScript, donde id se usa básicamente para administrar o hacer referencia al método mencionado anteriormente:

1. const id = navigator.geolocation.watchPosition(successCallback, errorCallback);

Para detener el seguimiento de la ubicación, simplemente se necesitará usar el método clearWatch().

1. navigator.geolocation.clearWatch(id);

Aunque el objeto options es opcional, proporciona parámetros que permiten obtener resultados más precisos, por ejemplo:

 1. const options = {
 2.   enableHighAccuracy: true,
 3.   timeout: 10000,
 4. };
 5.  
 6. navigator.geolocation.getCurrentPosition(
 7.   successCallback,
 8.   errorCallback,
 9.   options
10. );

En el código mostrado, especificamos que:

• La respuesta debería proporcionar una ubicación más precisa al establecer enableHighAccuracy en true.
• El tiempo máximo (en milisegundos) que el dispositivo puede tardar en devolver una ubicación. En este caso, 10 segundos (timeout).