Saltar al contenido

Detectar Ubicación de Usuario con Javascript

Muchos de los sitios web de hoy muestran una base de contenido dinámico en la ubicación del usuario para proporcionar información relevante, anuncios o lugares locales. En este artículo, le mostraremos cómo detectar la ubicación del usuario mediante la API de geolocalización. Una forma pura de JavaScript sin ningún servicio de terceros para recuperar la ubicación precisa del usuario.

API de geolocalización

La API de geolocalización permite que javascript o contenido web accedan a la ubicación del usuario o la ubicación del dispositivo. Si observa la notificación emergente en un sitio web que le solicita un permiso para acceder a su ubicación, esa es la API de geolocalización. Dado que la divulgación de su ubicación puede comprometer su privacidad, los navegadores web necesitarán su consentimiento antes de permitir el acceso.

Usar la geolocalización es muy fácil. Puede acceder a la posición del usuario utilizando getCurrentPosition y usar la función de devolución de llamada para procesar el objeto de posición devuelto.

navigator.geolocation.getCurrentPosition(callbackfunction)

Sin embargo, algunos navegadores no admiten la geolocalización, por lo que debe verificarlo primero.

if (navigator.geolocation) { //check if geolocation is available
                navigator.geolocation.getCurrentPosition(function(position){
                  console.log(position);
                });   
            }

El objeto de posición devuelta debería verse así.

Así que accede a la latitud y longitud del usuario a través de position.coords.latitude y position.coords.longitude

Combinado con Google Maps

Obtener latitud y longitud no es muy útil. Por lo tanto, necesita invertir la geocodificación para obtener la ciudad, el país, etc. A continuación, se muestra el ejemplo de cómo utilizar la geocodificación inversa de Google Maps para obtener la dirección de la ubicación especificada.

$.get( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+ position.coords.latitude + "," + position.coords.longitude +"&sensor=false", function(data) {
                    console.log(data);
                  })

A continuación se muestra el JSON devuelto de las direcciones

O puede mostrar el mapa de esa coordenada utilizando la API de Google Maps de esta manera.

var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + position.coords.latitude + "," + position.coords.longitude + "&zoom=13&size=800x400&sensor=false";
$('#output').html(img);

¡Espero que esto ayude! Siéntase libre de dejar un comentario si tiene alguna pregunta. 

Código fuente completo

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="jquery-2.1.4.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
  <div id="navbar"><span>Red Stapler - Geolocation API</span></div>
  <div id="wrapper">
    <button id="location-button">Get User Location</button>
    <div id="output"></div>
  </div>
  
  <script>
          $('#location-button').click(function(){
        
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                  console.log(position);
                  $.get( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+ position.coords.latitude + "," + position.coords.longitude +"&sensor=false", function(data) {
                    console.log(data);
                  })
                  var img = new Image();
                  img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + position.coords.latitude + "," + position.coords.longitude + "&zoom=13&size=800x400&sensor=false";
                  $('#output').html(img);
                });
                
            }
          });
  </script>
  </body>
</html>
Comparte