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 enlatitude
, y la longitud enlongitude
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.
Hola , muy interesante tu blog ,como obtener el getcurrentposition bypaseando la confirmacion,
Saludos.
Buenas tardes, espero todo esté super.
¿Habrá alguna manera de acceder a las coordenadas sin internet?
No se necesita internet para acceder a las coordenadas
Buena tarde, como podría pasar la variable a php para guardar las coordenadas en una base de datos?
saludos
Primero: https://parzibyte.me/blog/2019/08/09/obtener-ubicacion-javascript-enviarla-php/
Después: https://parzibyte.me/blog/2019/07/17/php-bases-de-datos-ejemplos-tutoriales-conexion/
No olvide compartir y seguirme