La API de Geolocation te permite descubrir la ubicación del usuario, con su consentimiento.
La API de Geolocation te permite descubrir, con el consentimiento del usuario, su ubicación. Puedes usar esta funcionalidad para, por ejemplo, guiar a un usuario a su destino y etiquetar geográficamente el contenido creado por usuarios, como marcar dónde se tomó una foto.
La API de Geolocation también te permite ver dónde se encuentra el usuario y seguirlo mientras se desplaza, siempre con su consentimiento (y solo mientras la página está abierta). Esto crea muchos casos de uso interesantes, como la integración con sistemas de backend para preparar un pedido para su retiro si el usuario está cerca.
Debes tener en cuenta muchos aspectos cuando uses la API de Geolocation. En esta guía, se explican los casos de uso y las soluciones comunes.
Resumen
- Usa la ubicación geográfica cuando beneficie al usuario.
- Solicita permiso como una respuesta clara a un gesto del usuario.
- Usa la detección de funciones en caso de que el navegador de un usuario no admita la ubicación geográfica.
- No solo aprendas a implementar la ubicación geográfica, sino también la mejor manera de usarla.
- Prueba la ubicación geográfica con tu sitio.
Cuándo usar la ubicación geográfica
- Determina dónde se encuentra el usuario en relación con una ubicación física específica para personalizar su experiencia.
- Adaptar la información (como las noticias) a la ubicación del usuario
- Mostrar la posición de un usuario en un mapa
- Etiquetar los datos creados dentro de tu aplicación con la ubicación del usuario (es decir, geoetiquetar una foto)
Solicita permisos con responsabilidad
Estudios de usuarios recientes demostraron que los usuarios desconfían de los sitios que simplemente les solicitan que proporcionen su posición cuando se carga la página. ¿Cuáles son las prácticas recomendadas?
Supón que los usuarios no te darán su ubicación
Muchos de tus usuarios no querrán darte su ubicación, por lo que debes adoptar un estilo de desarrollo defensivo.
- Controla todos los errores de la API de Geolocation para que puedas adaptar tu sitio a esta condición.
- Sé claro y explícito sobre tu necesidad de acceder a la ubicación.
- Usa una solución de resguardo si es necesario.
Usa un resguardo si se requiere la ubicación geográfica
Te recomendamos que tu sitio o aplicación no requiera acceso a la ubicación actual del usuario. Sin embargo, si tu sitio o aplicación requiere la ubicación actual del usuario, existen soluciones de terceros que te permiten obtener una estimación de dónde se encuentra la persona en ese momento.
Estas soluciones suelen funcionar analizando la dirección IP del usuario y asignándola a las direcciones físicas registradas en la base de datos de RIPE. Estas ubicaciones suelen ser poco precisas, ya que, por lo general, indican la posición del centro de telecomunicaciones o la torre de telefonía celular más cercana al usuario. En muchos casos, es posible que ni siquiera sean tan precisos, en especial si el usuario está en una VPN o en algún otro servicio de proxy.
Solicita siempre acceso a la ubicación con un gesto del usuario
Asegúrate de que los usuarios comprendan por qué les pides su ubicación y cuál será el beneficio para ellos. Solicitarlo de inmediato en la página principal mientras se carga el sitio genera una experiencia del usuario deficiente.
En su lugar, dale al usuario un llamado a la acción claro o una indicación de que una operación requerirá acceso a su ubicación. De esta manera, el usuario puede asociar con mayor facilidad el mensaje del sistema para acceder con la acción que acaba de iniciar.
Indica claramente que una acción solicitará su ubicación
En un estudio del equipo de Google Ads, cuando se le pidió a un usuario que reservara una habitación de hotel en Boston para una próxima conferencia en un sitio de hoteles en particular, se le solicitó que compartiera su ubicación GPS inmediatamente después de presionar el llamado a la acción "Buscar y reservar" en la página principal.
En algunos casos, el usuario se frustró porque no entendía por qué se le mostraban hoteles en San Francisco cuando quería reservar una habitación en Boston.
Una mejor experiencia es asegurarse de que los usuarios comprendan por qué les pides su ubicación. Agrega un indicador conocido que sea común en todos los dispositivos, como un buscador de rango, o un llamado a la acción explícito, como “Buscar cerca de mí”.
Anima sutilmente a los usuarios a otorgar permiso para acceder a su ubicación
No tienes acceso a lo que hacen los usuarios. Sabes exactamente cuándo los usuarios rechazan el acceso a sus ubicaciones, pero no sabes cuándo te lo otorgan; solo sabes que obtuviste acceso cuando aparecen los resultados.
Es una buena práctica "dar un empujoncito" a los usuarios para que realicen la acción si necesitas que la completen.
Recomendaciones:
- Configura un temporizador que se active después de un período breve; 5 segundos es un buen valor.
- Si recibes un mensaje de error, muéstrale un mensaje al usuario.
- Si obtienes una respuesta positiva, inhabilita el temporizador y procesa los resultados.
- Si, después del tiempo de espera, no obtienes una respuesta positiva, muéstrale una notificación al usuario.
- Si la respuesta llega más tarde y la notificación sigue presente, quítala de la pantalla.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Navegadores compatibles
La mayoría de los navegadores ahora admiten la API de Geolocation, pero se recomienda verificar siempre la compatibilidad antes de realizar cualquier acción.
Puedes comprobar la compatibilidad fácilmente probando la presencia del objeto de ubicación geográfica:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Determina la ubicación actual del usuario
La API de Geolocation ofrece un método simple de "un solo intento" para obtener la ubicación del usuario: getCurrentPosition(). Una llamada a este método informa de forma asíncrona la ubicación actual del usuario.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
Si es la primera vez que una aplicación de este dominio solicita permisos, el navegador suele verificar el consentimiento del usuario. Según el navegador, también puede haber preferencias para permitir o no las búsquedas de permisos, en cuyo caso se omite el proceso de confirmación.
Según el dispositivo de ubicación que use tu navegador, el objeto de posición puede contener mucho más que solo la latitud y la longitud; por ejemplo, puede incluir una altitud o una dirección. No puedes saber qué información adicional usa ese sistema de ubicación hasta que realmente devuelve los datos.
Cómo observar la ubicación del usuario
La API de Geolocation te permite obtener la ubicación del usuario (con su consentimiento) con una sola llamada a getCurrentPosition().
Si deseas supervisar continuamente la ubicación del usuario, usa el método de la API de Geolocation, watchPosition(). Funciona de manera similar a
getCurrentPosition(), pero se activa varias veces a medida que el software de posicionamiento realiza las siguientes acciones:
- Obtiene una ubicación más precisa del usuario.
- Determina que la posición del usuario está cambiando.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Cuándo usar la ubicación geográfica para observar la ubicación del usuario
- Quieres obtener una ubicación más precisa del usuario.
- Tu aplicación necesita actualizar la interfaz de usuario en función de la información de ubicación nueva.
- Tu aplicación necesita actualizar la lógica empresarial cuando el usuario ingresa a una determinada zona definida.
Prácticas recomendadas para usar la ubicación geográfica
Siempre limpia y conserva la batería
La supervisión de los cambios en una ubicación geográfica no es una operación gratuita. Si bien los sistemas operativos pueden introducir funciones de plataforma para permitir que las aplicaciones se conecten al subsistema geográfico, tú, como desarrollador web, no tienes idea de qué compatibilidad tiene el dispositivo del usuario para supervisar su ubicación y, mientras observas una posición, estás involucrando al dispositivo en mucho procesamiento adicional.
Cuando ya no necesites hacer un seguimiento de la posición del usuario, llama a clearWatch para desactivar los sistemas de ubicación geográfica.
Aborda los errores con facilidad
Lamentablemente, no todas las búsquedas de ubicación se realizan correctamente. Tal vez no se pudo encontrar un GPS o el usuario inhabilitó repentinamente las búsquedas de ubicación. En caso de que se produzca un error, se llama a un segundo argumento opcional para getCurrentPosition(), de modo que puedas notificar al usuario dentro de la devolución de llamada:
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Reduce la necesidad de iniciar el hardware de ubicación geográfica
En muchos casos de uso, no necesitas la ubicación más actualizada del usuario, sino solo una estimación aproximada.
Usa la propiedad opcional maximumAge para indicarle al navegador que use un resultado de ubicación geográfica obtenido recientemente. Esto no solo devuelve el resultado más rápido si el usuario ya solicitó los datos antes, sino que también evita que el navegador inicie sus interfaces de hardware de ubicación geográfica, como la triangulación de Wi-Fi o el GPS.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
No hagas esperar al usuario, establece un tiempo de espera
A menos que establezcas un tiempo de espera, es posible que nunca se devuelva tu solicitud de la posición actual.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Prefiere una ubicación aproximada en lugar de una precisa
Si quieres encontrar la tienda más cercana a un usuario, es poco probable que necesites una precisión de 1 metro. La API está diseñada para proporcionar una ubicación aproximada que se devuelva lo más rápido posible.
Si necesitas un nivel alto de precisión, puedes anular la configuración predeterminada
con la opción enableHighAccuracy. Usa esta opción con moderación, ya que tarda más en resolverse y consume más batería.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Cómo emular la ubicación geográfica con las Herramientas para desarrolladores de Chrome
Una vez que hayas configurado la ubicación geográfica, deberás hacer lo siguiente:
- Prueba cómo funciona tu app en diferentes ubicaciones geográficas.
- Verifica que tu app se degrade de forma correcta cuando la ubicación geográfica no esté disponible.
Puedes hacer ambas cosas desde las Herramientas para desarrolladores de Chrome.
- Abre las Herramientas para desarrolladores de Chrome.
- Presiona Esc para abrir el panel lateral de la consola.
- Abre el menú del panel lateral de Console
- Haz clic en la opción Sensores para mostrar la pestaña Sensores.
Desde aquí, puedes anular la ubicación y establecer una ciudad importante predeterminada, ingresar una ubicación personalizada o inhabilitar la ubicación geográfica estableciendo la anulación en Ubicación no disponible.