Geolocalización

por

Con HTML5 y la API geolocalización de JavaScript, podemos ubicar nuestra web de forma sencilla, ya sea un ordenador, tablet o teléfono móvil.

Puedes consultar su funcionamiento completo en la documentación oficial https://developer.mozilla.org/es/docs/Web/API/Geolocation. Aquí dejo el código de un ejemplo funcional.

<!DOCTYPE html>
<html>
<head>
<script>
  // Esta función activa la geolocalización en el dispositivo
  function init() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
      } else {
        alert('La Geolocalización no está soportada en este dispositivo');
      }
  }
  // Esta función obtiene las coordenadas gps 
  function showPosition(pos) {				
    document.getElementById('lat').innerHTML = pos.coords.latitude;	
    document.getElementById('lng').innerHTML = pos.coords.longitude;
  }
  // Esta función muestra si hubo errores
  function showError(error) {
    alert('ERROR(' + error.code + '): ' + error.message);
  }
</script>
</head>  
<body>
<h1>Geolocalización</h1>
<p>Tus posición es latitud: <span id="lat"></span>, longitud <span id="lng"></span></p>
<script>
  // Activamos la geolocalización
  init();
</script>
</body>
</html>

En esta pequeña página HTML podemos ver los pasos básicos de la API Geolocalización:

  • init() Función de inicialización de la geolocalización. Preguntamos si la API Geolocalización está soportada en el navegador. En caso afirmativo, y por seguridad del dispositivo, se preguntará al usuario si desea mostrar su ubicación (este acto no es controlable por nosotros). Si el usuario consiente, entonces se procede a obtener su ubicación con getCurrentPosition()
  • getCurrentPosition(success, error) Esta función está diseñada para mostrar las coordenadas de la ubicación del dispositivo o un error si no se ha podido obtener la ubicación. La misma API se encarga de bifurcar a una de las dos funciones que le debemos pasar como parámetros. Estas funciones son las que utilizaremos nosotros para ejercer las acciones que queremos en caso de ubicar el dispositivo o detectar un error
    • showPosition(pos) Si la geolocalización ha sido correcta, llegamos a esta función con un parámetro que contiene un Objeto con las coordenadas de la latitud y longitud. Es tarea nuestra programar las acciones oportunas una vez obtenemos las coordenadas de la ubicación
    • showError(error) Si hubo un error en la geolocalización se llega a esta función con un parámetro que contiene el tipo de error detectado. También es responsabilidad nuestra tomar las acciones oportunas al detectar el error

Actualmente obtener la ubicación de un dispositivo se ha convertido en una herramienta imprescindible en muchas aplicaciones, y con la API de JavaScript podemos simplificarla de manera muy sencilla.

Lo único a tener en cuenta y que no podemos controlar es que por razones de seguridad, primero se notifica al usuario y se le pide conceder el permiso. Cada navegador tiene sus propias políticas y métodos para solicitar este permiso y no depende de nosotros.

NOTA: Esta API está disponible solo en contextos seguros (HTTPS).

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario