Resumen: en este post vamos a ver cómo obtener la ubicación del usuario (coordenadas) usando JavaScript.

Gracias a este método podremos obtener la ubicación precisa de un teléfono, tableta o computadora, pues mientras se cuente con un navegador actualizado y GPS o internet se puede obtener la latitud y longitud de un dispositivo.

Para acceder a la ubicación con JavaScript vamos a usar navigator.geolocation y su método getCurrentPosition.

También vamos a manejar los permisos de acceso a la ubicación desde el navegador.

Puedes acceder a la demostración aquí, y al repositorio en GitHub aquí.

Seguridad, disponibilidad y permisos para acceder a la ubicación

• Para acceder a la ubicación debemos tener un sitio con https, o estar en localhost. No se puede acceder a la ubicación si es un sitio sin https.
• No todos los navegadores tienen la API de geolocation para acceder a la ubicación, hay que comprobar la disponibilidad como veremos en los ejemplos
• Al intentar acceder a la ubicación con JavaScript, se pedirán permisos al usuario. Sin permisos, no podemos acceder a las coordenadas. Esto es obviamente por seguridad.
• En los dispositivos móviles (entre otros) se muestra el icono de GPS en la barra de notificaciones

Una vez aclarados los puntos, comencemos.

Acceder a la ubicación con JS

Debemos mirar si navigator tiene geolocation con un:

if ("geolocation" in navigator)

Después, debemos obtener la ubicación llamando a getCurrentPosition así:

navigator.geolocation.getCurrentPosition(onUbicacionConcedida, onError, opciones)

Al llamar a ese método, se pedirá permiso al usuario:

Los argumentos que se envían al método son los siguientes…

1 – Cuando la ubicación se obtiene

Una función callback en caso de que el usuario dé permiso y se pueda acceder a la ubicación. Ese callback va a recibir un objeto que tiene:

• coords: un objeto con la latitud en latitude, y la longitud en longitude
• timestamp: el tiempo en el que fue obtenida la ubicación

2 – Cuando ocurre un error

Una función callback en caso de error, que recibe como argumento la causa del error. Esto puede ser porque el usuario denegó la petición de acceso a la ubicación o porque no cuenta con el hardware necesario

3 – Un objeto de opciones

highAccuracy

Alta precisión, por defecto está en false pero podemos ponerla en true.

Esto permite que accedamos a una ubicación más precisa obtenida por GPS, aunque puede tardar más en obtenerse

timeout

Cuántos milisegundos puede tomarse el dispositivo en regresarnos la ubicación. Por defecto es Infinity.

Esto funciona para decir algo como “intenta obtener la ubicación pero si no es devuelta en menos de 10 segundos entonces cancela todo”

Nota: ten cuidado con este valor, si lo pones muy corto puede que obtengas un error debido a que la ubicación no se ha podido obtener. Todo depende del dispositivo y las circunstancias.

maximumAge

La ubicación es guardada en un caché, y cuando accedemos a la misma puede que se nos devuelva una ubicación de hace algunos milisegundos.

Con esta opción podemos establecer qué tan fresca queremos la ubicación, un valor de 0 forzaría a obtener la última ubicación.

Hablar es de mal gusto, muéstrame el código

Ahora que ya he explicado la teoría, veamos la práctica. Analicemos el siguiente código:

//  https://parzibyte.me/blog
const funcionInit = () => {
 if (!"geolocation" in navigator) {
  return alert("Tu navegador no soporta el acceso a la ubicación. Intenta con otro");
 }

 const onUbicacionConcedida = ubicacion => {
  console.log("Tengo la ubicación: ", ubicacion);
 }
  
 const onErrorDeUbicacion = err => {
  console.log("Error obteniendo ubicación: ", err);
 }

 const opcionesDeSolicitud = {
  enableHighAccuracy: true, // Alta precisión
  maximumAge: 0, // No queremos caché
  timeout: 5000 // Esperar solo 5 segundos
 };
 // Solicitar
 navigator.geolocation.getCurrentPosition(onUbicacionConcedida, onErrorDeUbicacion, opcionesDeSolicitud);

};

Al llamar a funcionInit se requerirá el acceso a la ubicación.

Primero definimos las funciones de callback y las opciones de obtención de ubicación, después invocamos a getCurrentPosition y eso es todo lo necesario.

Ejemplo de código

Ahora veamos un ejemplo de implementación del código antes mencionado.

Creamos una página HTML basada en Bootstrap 4. Definimos algunos elementos y en ellos escribimos la ubicación.

Queda así:

<!doctype html>
<html lang="es">
<!--
  Plantilla inicial de Bootstrap 4
  @author parzibyte
  Visita: parzibyte.me/blog
-->

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="description" content="Acceder a la ubicación del dispositivo con JavaScript">
 <meta name="author" content="Parzibyte">
 <title>Acceder a la ubicación del dispositivo con JavaScript</title>
 <!-- Cargar el CSS de Boostrap-->
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous">
</head>

<body>
 <!-- Termina la definición del menú -->
 <main role="main" class="container">
  <div class="row">
   <!-- Aquí pon las col-x necesarias, comienza tu contenido, etcétera -->
   <div class="col-12">
    <h1>Acceder a la ubicación con JavaScript</h1>
    <a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
    <br>
    <strong>Latitud: </strong> <p id="latitud"></p>
    <br>
    <strong>Longitud: </strong> <p id="longitud"></p>
    <br>
    <a target="_blank" id="enlace" href="#">Abrir en Google Maps</a>
   </div>
  </div>
 </main>
 <script src="script.js">
 </script>
</body>

</html>

Después tenemos el siguiente script en donde esperamos a DOMContentLoaded y ejecutamos las acciones. Es el mismo código de arriba pero con unos elementos extra:

/**
    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
*/const funcionInit = () => {
 if (!"geolocation" in navigator) {
  return alert("Tu navegador no soporta el acceso a la ubicación. Intenta con otro");
 }

 const $latitud = document.querySelector("#latitud"),
  $longitud = document.querySelector("#longitud"),
  $enlace = document.querySelector("#enlace");


 const onUbicacionConcedida = ubicacion => {
  console.log("Tengo la ubicación: ", ubicacion);
  const coordenadas = ubicacion.coords;
  $latitud.innerText = coordenadas.latitude;
  $longitud.innerText = coordenadas.longitude;
  $enlace.href = `https://www.google.com/maps/@${coordenadas.latitude},${coordenadas.longitude},20z`;
 }
 const onErrorDeUbicacion = err => {

  $latitud.innerText = "Error obteniendo ubicación: " + err.message;
  $longitud.innerText = "Error obteniendo ubicación: " + err.message;
  console.log("Error obteniendo ubicación: ", err);
 }

 const opcionesDeSolicitud = {
  enableHighAccuracy: true, // Alta precisión
  maximumAge: 0, // No queremos caché
  timeout: 5000 // Esperar solo 5 segundos
 };

 $latitud.innerText = "Cargando...";
 $longitud.innerText = "Cargando...";
 navigator.geolocation.getCurrentPosition(onUbicacionConcedida, onErrorDeUbicacion, opcionesDeSolicitud);

};
document.addEventListener("DOMContentLoaded", funcionInit);

Si el usuario da el permiso, se verá algo así:

Me he dado a la tarea de poner un enlace con Google maps que simplemente te lleva a esa web con las coordenadas que se obtuvieron de la app.

Los caracteres raros que definen la cadena son backticks.

En próximos tutoriales te mostraré a observar cuando la ubicación cambia y también a enviar las coordenadas a un servidor con PHP.

Mientras tanto puedes acceder a la demostración aquí, y al repositorio en GitHub aquí.

Actualización: ya existe la parte 2 en donde vemos cómo recibir actualizaciones de ubicación con JavaScript.