Cómo detectar la ubicación de los visitantes de su sitio web usando JavaScript

Foto de Goran Ivos en Unsplash

Detectar la ubicación de los usuarios de su sitio web es útil por varias razones.

Es posible que, por ejemplo, desee mostrar contenido diferente, tal vez en diferentes idiomas para personas de diferentes países, o mostrar información dirigida a visitantes de diferentes lugares.

Cualesquiera que sean sus razones, tiene dos opciones:

  1. La API de geolocalización y
  2. Búsqueda de dirección IP

La API de geolocalización

La API de geolocalización es una nueva función HTML5 que permite a los visitantes de una página web compartir su ubicación con usted si así lo desean.

Cuando intenta recuperar la ubicación utilizando esta API, se muestra un mensaje al usuario, preguntándole si desea compartir su ubicación con su sitio.

Ejemplo del tipo de aviso que se muestra al usuario

Obviamente, esto significa que no obtendrá la ubicación si el usuario decide no compartir su ubicación con usted.

Inconvenientes: solo funciona en servidores seguros (https). No es compatible con Internet Explorer 10 y versiones posteriores, ni con OperaMini.

La salida del código solo nos da las coordenadas. ¿Qué sucede si necesita la ubicación real u obtener la dirección en palabras? Hablaremos de esto después de discutir la búsqueda de IP.

Búsqueda de dirección IP

Una búsqueda de dirección IP es otra forma de obtener la ubicación de su visitante. Por lo general, utilizamos API / servicios de búsqueda de IP pública para esta opción. Algunos de estos son servicios pagos y otros son gratuitos.

Los ejemplos incluyen API de geolocalización IP, IPinfo y GEOIP DB. También proporcionan los datos en varios formatos, como JSON, XML y CSV. Para comprender mejor cómo utilizar estos servicios, lea su documentación.

Usaré la API de geolocalización IP para mi ejemplo. Podría usar Vanilla JavaScript, pero no lo haré. Es más fácil con bibliotecas como jQuery.

Esto como la salida en mi consola:

Inconvenientes: aunque el país proporcionado por la mayoría de los servicios de búsqueda de IP es casi siempre preciso, las coordenadas no siempre son precisas. Además, si va a realizar muchas solicitudes, algunos de estos servicios requieren que obtenga una clave API, y es posible que deba pagar el servicio.

Puede usar la búsqueda de IP como alternativa o copia de seguridad para la API de geolocalización en navegadores que no admiten la geolocalización, o avisarle cuando se produce un error, como este:

Ahora que tenemos nuestra ubicación de una forma u otra, vamos a convertir la latitud y longitud que recuperamos, a una dirección más completa utilizando la API de geocodificación inversa de Google Maps.

Según Google, la geocodificación inversa es el proceso de convertir coordenadas geográficas en direcciones legibles por humanos. Todo lo que necesitamos es una clave de API. Siga los pasos para obtener uno aquí.

Esto es lo que obtuve:

Ejemplo de salida de la API de geocodificación inversa

Puede jugar con el objeto para obtener la dirección deseada en el formato que más le guste.

Poniendo todo junto, tenemos el siguiente código. (Tenga en cuenta que se modificó la función ipLookUp).

En este punto, sabemos cómo recuperar la ubicación de nuestro usuario sin importar qué, y ahora puede adaptar el código a su propio proyecto único.

Espero que hayas aprendido algo, ¡gracias por leer!

Código fuente

Puede encontrar el código para este artículo en GitHub.