Original article: How to Use the Geolocation API in JavaScript – with Code Examples

La API Geolocation es una API estándar implementada en navegadores para recuperar la ubicación de las personas quienes están interactuando con una aplicación web.

Esta API permite a los usuarios que envíen su ubicación a una aplicación web para permitir servicios relevantes, tales como buscar un restaurante o un hotel cercano al usuario.

En este artículo, voy a mostrarte cómo se usa la API Geolocation con JavaScript y mostrar la ubicación actual del usuario usando una API de un mapa.

¡Comencemos!

Cómo acceder a la API Geolocation

Los Navegadores implementan la API Geolocation en el objeto navigator.geolocation. Puedes verificar si el navegador que usas soporta esta API de esta forma:

if ('geolocation' in navigator) {
  console.log('Geolocation está disponible');
} else {
  console.log('Geolocation NO está disponible');
}

Si el navegador responde con 'Geolocation está disponible', entonces puedes usar los métodos del objeto geolocation para obtener los datos del usuario.

La API Geolocation solamente está disponible bajo un contexto de HTTPS seguro, pero los navegadores modernos como Chrome y Firefox permiten el acceso a esta API desde localhost para propósitos de desarrollo.

Hay dos métodos que puedes usar para obtener datos de usuario:

  • getCurrentPosition(): Regresa la posición actual del dispositivo.
  • watchPosition(): Observa la posición del dispositivo continuamente hasta que el observador se detiene.

Ambos métodos de arriba reciben 3 argumentos de esta forma:

  • success: una función callback para cuando se recuperan los datos de geolocalización (requerido).
  • error: una función callback para cuando el método encuentra un error (opcional).
  • options: un objeto definiendo parámetros extras cuando se ejecuta el método (opcional).

Cuando a la API Geolocation se accede por primera vez, una solicitud de permiso aparecerá cerca de la barra de URL como se muestra abajo:

geolocation-permission
Solicitando permiso para acceder a la Ubicación del Usuario

Podrías estar familiarizado con la ventanita emergente de arriba. Cuando eliges bloquear la solicitud, entonces la función callback error se ejecutará por la API.

De otra forma, el callback success será ejecutado.

Cómo obtener la posición actual del Usuario

Para obtener la posición actual del usuario, puedes llamar a la función getCurrentPosition() desde el objeto, navigator.geolocation como se muestra abajo:

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

navigator.geolocation.getCurrentPosition(success);

El método getCurrentPosition() enviará el objeto position a la función success() de arriba.

El objeto position contiene las coordenadas de ubicación y las marcas de tiempo mostrando cuando se recuperó la ubicación.

Lo de abajo es un ejemplo del objeto position:

{
  coords: {
    latitude: 1.314,
    longitude: 103.84425
    altitude: null
  },
  timestamp: 1708674456885
}

Usando la información de latitud y longitud, puedes determinar con precisión la ubicación del usuario y proveer información y servicios relevantes.

Por ejemplo, veamos cómo puedes enviar una solicitud al sitio web OpenStreetMap y determinar la ubicación actual del usuario usando los datos desde la API Geolocation.

OpenStreetMap es un proyecto de código abierto que provee un mapa geográfico gratuito de todo el planeta.

Necesitas crear un documento HTML con el siguiente contenido body:

<body>
  <button id="getLocation">Obtener ubicación</button>
  <br>
  <a id="locationResult" target="_blank"></a>
</body>

Cuando el usuario hace clic en el botón Obtener ubicación de arriba, accederemos a la API Geolocation, recuperando la ubicación del usuario, y proveer un enlace para ver la ubicación del usuario en un mapa.

Luego, crea una etiqueta <script> antes de cerrar la etiqueta </body> y escribe el siguiente código de JavaScript:

<script>
  const locationResult = document.querySelector('#locationResult');
  document.querySelector('#getLocation').addEventListener('click', () => {
    locationResult.textContent = 'Recuperando la Ubicacion del Usuario...'

    function success(position) {
      let { coords } = position;
      locationResult.textContent = 'Vea mi ubicacion en un mapa';
      locationResult.href = `https://www.openstreetmap.org?mlat=${coords.latitude}&mlon=${coords.longitude}`;
    }

    navigator.geolocation.getCurrentPosition(success);
  });
</script>

Cuando se hace clic al botón, ejecutaremos el método getCurrentPosition() y definimos el atributo href de la etiqueta <a> al sitio web OpenStreetMap, pasándole los datos latitude y longitude bajo la cadena de solicitud mlat y mlong.

Visitando el enlace, mostraría un mapa de la ubicación actual como se muestra abajo:

OpenStreetMap Using Geolocation API data
El Sitio web OpenStreetMap determina los datos Latitud y Longitud

Y así es cómo obtienes la ubicación actual del usuario. Cómo procesar la información de ubicación depende de ti.

He creado un sitio web donde puedes probar esta funcionalidad en https://nathansebhastian.github.io/js-geolocation-api/.

Ahora, aprendamos sobre el método watchPosition().

Cómo observar la Posición del Usuario

El método watchPosition() continuará observando la posición del dispositivo cuando se llama. Ejecutará la función callback success cada vez que la ubicación del dispositivo cambie.

Puedes llamar al método como sigue:

function success(position) {
  const { coords } = position;
  console.log('Latitude data: ' + coords.latitude);
  console.log('Longitude data: ' + coords.longitude);
}

navigator.geolocation.watchPosition(success);

El método watchPosition() regresa un número ID que rastrea al observador. Si quieres hacer que el observador deje de enviar datos de ubicación, necesitas llamar al método clearWatch() y pasar el número ID:

function success(position) {
  const { coords } = position;
  console.log('Latitude data: ' + coords.latitude);
  console.log('Longitude data: ' + coords.longitude);
}

// Almacena el numero ID en una variable
const watcherID = navigator.geolocation.watchPosition(success);

// Detiene al observador
navigator.geolocation.clearWatch(watcherID);

Y eso es todo lo que hay que hacer al método watchPosition().

Cómo agregar el objeto Opciones

Ahora, veamos al objeto opcional options que puedes pasar a los métodos getCurrentPosition() y watchPosition().

El objeto options te permite personalizar el comportamiento de los métodos. Hay tres opciones que puedes poner:

  • enableHighAccuracy: un valor Booleano que instruye al método que provea una posición más precisa. Esto incrementará el consumo de energía. El valor predeterminado es false.
  • timeout: un valor numérico que representa cuánto espera el método por una respuesta. El valor predeterminado es Infinity, lo que significa que el método esperará hasta que una ubicación esté disponible.
  • maximumAge: un valor numérico que representa cuánto tiempo la API Geolocation puede enviar los datos de ubicación previos. El valor predeterminado es 0, de esa forma la API siempre regresa la ubicación más reciente. Si se define Infinity, entonces la API siempre regresará el primer dato de ubicación recuperado.

Puedes usar el objeto opciones cuando se llama a los métodos de geolocation.

Por ejemplo:

const options = {
  enableHighAccuracy: true, // permite alta precisión
  timeout: 300000, // espera 5 minutos
};

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

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

// Ejecuta el método getCurrentPosition() con opciones personalizables
navigator.geolocation.getCurrentPosition(
  success,
  error,
  options
);

En el código de arriba, el método getCurrentPosition() usará el modo de alta precisión, y esperará 5 minutos por una respuesta desde el dispositivo.

Resumen

La API Geolocation es una API de JavaScript estándar que permite a una aplicación web acceder a los datos de ubicación del usuario.

Usando los datos de Geolocalización, puedes proveer servicios o contenido relevantes a la ubicación del usuario, tales como el transporte público o el hospital más cercano.

Si disfrutaste este artículo y quieres aprender más de mí, te recomiendo que mires mi nuevo libro Beginning Modern JavaScript.

Beginning Modern JavaScript

El libro está diseñado para que sea fácil para los principiantes y accesible para cualquiera que quiera aprender JavaScript. Provee una guía amable de paso a paso para ayudarte a entender cómo usar JavaScript para crear una aplicación web dinámica.

Esta es mi promesa: Sentirás de verdad que entiendes lo que estás haciendo con JavaScript.

¡Nos vemos en otros artículos!