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í:

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.

Relacionado:  Autocompletado AJAX con PHP y MySQL

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

También podemos hacerlo con async/await:

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.

En caso de que quieras probarlo, puedes hacer click aquí (no olvides abrir la consola en la página).

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


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 813 suscriptores


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/

1 Comment

Renato · noviembre 10, 2020 a las 11:55 am

This is great , Thanks

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: