javascript

API para obtener ubicación

Hoy te mostraré cómo puedes obtener la ubicación de un usuario o visitante de tu sitio web a través de su IP, consumiendo una API para la geolocalización o ubicación a partir de la IP.

De este modo vas a poder conocer la ubicación del usuario (con latitud y longitud) sin solicitarle permisos extra, aunque quiero dejar claro que obtener la ubicación por IP es mucho menos precisa que obtenerla a través del GPS.

Si solo quieres una ubicación aproximada, esta API funcionará de maravilla y al final vas a tener las coordenadas de su ubicación.

Sobre la API

Esta API tiene un límite pero el mismo es bastante grande. Permite hasta 15000 (quince mil) peticiones por hora. Eso sí, no ofrece ninguna garantía, pero funciona de maravilla.

Además, no se necesita una api key, por lo que esto satisface nuestras necesidades.

La API devuelve la ubicación en varios formatos, uno de ellos es JSON. Te voy a mostrar un ejemplo para obtener la latitud y longitud usando JavaScript, de este modo vas a obtener la ubicación del cliente.

Por cierto, el endpoint para la API es: https://freegeoip.app/json/

Consumir API de ubicación con JavaScript

Vamos a usar fetch para consumir el endpoint, y luego decodificarlo como JSON. Al final vamos a obtener un objeto que tiene varias cosas interesantes. Se ve así:

{
    "ip": "12.34.56.78",
    "country_code": "MX",
    "country_name": "México",
    "region_code": "ASD",
    "region_name": "NombreRegión",
    "city": "Ciudad",
    "zip_code": "Código postal",
    "time_zone": "America/Mexico_City",
    "latitude": 0.0,
    "longitude": 0.0,
    "metro_code": 0
}

Lo que en este caso define la ubicación aproximada es latitude y longitude. Otros datos interesantes son el código del país, la ciudad, el código postal, etcétera. Te recuerdo de nuevo que estos son datos aproximados y que si quieres una precisión mayor utilices el GPS con JavaScript.

Pero vamos al código, que ya hablé mucho. Queda así con promesas:

/*
  https://parzibyte.me/blog
*/const API_ENDPOINT = "https://freegeoip.app/json/";
fetch(API_ENDPOINT)
.then(response => response.json())
.then(datosUbicacion => {
  // Imprimir los datos de la ubicación
  console.log(datosUbicacion);
  // Recuerda que podemos acceder a latitude y longitude, entre otros
  const latitud = datosUbicacion.latitude,
    longitud = datosUbicacion.longitude;
    
  console.log(`Tus coordenadas son ${latitud},${longitud}`);
});

También podemos hacerlo con async/await:

/*
https://parzibyte.me/blog
*/const obtenerUbicacion = async () => {

 const API_ENDPOINT = "https://freegeoip.app/json/";
 const response = await fetch(API_ENDPOINT);
 const datosUbicacion = await response.json();
 // Imprimir los datos de la ubicación
 console.log(datosUbicacion);
 // Recuerda que podemos acceder a latitude y longitude, entre otros
 const latitud = datosUbicacion.latitude,
  longitud = datosUbicacion.longitude;

 console.log(`Tus coordenadas son ${latitud},${longitud}`);
}

obtenerUbicacion();

Finalmente se mostrarán los resultados:

Ubicación con JavaScript y API

Y obviamente a partir de la latitud y longitud puedes hacer otras cosas, solo te he mostrado un ejemplo muy sencillo y rápido.

También te dejo la documentación de la API en caso de que quieras aprender más sobre la misma.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

3 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

3 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

4 días hace

Esta web usa cookies.