La Geolocation API te permite descubrir la ubicación del usuario, siempre que este dé su consentimiento.
La Geolocation API te permite descubrir, con el consentimiento del usuario, la ubicación del usuario. Puedes usar esta funcionalidad para situaciones como guiar a un usuario hacia su destino y etiquetar geográficamente contenido creado por el usuario; por ejemplo, marcar dónde se tomó una foto.
La Geolocation API también te permite ver dónde se encuentra el usuario y mantenerte informado a medida que se desplaza, siempre con su consentimiento (y solo mientras la página está abierta). Esto genera muchos casos de uso interesantes, como la integración con sistemas de backend para preparar un pedido para que lo retire el usuario si se encuentra cerca del lugar.
Tienes que tener en cuenta varios aspectos cuando usas la Geolocation API. Esta guía te ayudará con los casos de uso y las soluciones comunes.
Resumen
- Usa la ubicación geográfica cuando beneficie al usuario.
- Pide 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 cómo implementar la ubicación geográfica; aprende la mejor manera de usarla.
- Prueba la ubicación geográfica con tu sitio.
Cuándo utilizar la ubicación geográfica
- Descubre dónde está el usuario más cerca de una ubicación física específica para personalizar la experiencia del usuario.
- Adapta la información (como las noticias) a la ubicación del usuario.
- Muestra la posición de un usuario en un mapa.
- Etiqueta los datos creados dentro de tu aplicación con la ubicación del usuario (es decir, etiquete geográficamente una imagen).
Solicita permiso de forma responsable
Estudios recientes demostraron que los usuarios desconfían de los sitios que simplemente le solicitan al usuario que revele su posición durante la carga de la página. ¿Cuáles son las prácticas recomendadas?
Supón que los usuarios no te proporcionarán su ubicación
Muchos de tus usuarios no querrán proporcionarte su ubicación, por lo que deberás adoptar un estilo de desarrollo defensivo.
- Soluciona todos los errores de la API de geolocalización, de modo que puedas adaptar tu sitio a esta condición.
- Explica de manera clara y explícita tu necesidad de conocer 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 app no solicite acceso a la ubicación actual del usuario. Sin embargo, si tu sitio o aplicación requieren la ubicación actual del usuario, existen soluciones de terceros que te permiten obtener una idea aproximada de dónde se encuentra la persona en ese momento.
Por lo general, estas soluciones observan la dirección IP del usuario y la asignan a las direcciones físicas registradas en la base de datos del RIPE. Estas ubicaciones generalmente no son muy precisas y te proporcionan la ubicación del concentrador 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 utiliza una VPN o algún otro servicio de proxy.
Siempre solicita acceso a la ubicación mediante un gesto del usuario
Asegúrate de que los usuarios entiendan por qué les solicitas su ubicación y cuál será el beneficio para ellos. Si la solicitas de inmediato en la página principal mientras se carga el sitio, afectarás negativamente la experiencia del usuario.
Como alternativa, tienes que proporcionar al usuario una llamada a la acción clara o una indicación de que una operación requerirá acceso a su ubicación. El usuario podrá asociar más fácilmente la solicitud de acceso del sistema con la acción que se acaba de iniciar.
Indique claramente al usuario que en una acción le solicitarán la ubicación
En un estudio realizado por el equipo de Google Ads, cuando se le pidió a un usuario que reservara una habitación de hotel en Boston para una conferencia futura en un sitio de hoteles en particular, se le pidió 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, los usuarios se frustraron porque no pudieron comprender la razón por la cual se les mostraban hoteles en San Francisco cuando deseaban reservar una habitación en Boston.
Para proporcionar una mejor experiencia, asegúrate de que los usuarios comprendan la razón por la cual se les solicita su ubicación. Agrega un significante conocido que sea común en todos los dispositivos, como un buscador de alcance o una llamada a la acción explícita, como “Buscar cerca de mi ubicación”.
Invita amablemente a los usuarios a que te den permiso para acceder a su ubicación
No tienes acceso a lo que los usuarios están haciendo. Sabes exactamente cuándo los usuarios deshabilitan el acceso a su ubicación, pero no sabes cuándo te otorgan acceso. Solo sabes que obtuviste acceso cuando aparecen los resultados.
Una práctica recomendada es "invitar" a los usuarios a la acción si necesitas que completen la acción.
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 aún está presente, retírala 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 te recomendamos que siempre verifiques la compatibilidad antes de comenzar a usarla.
Para verificar fácilmente la compatibilidad, prueba 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 Geolocation API ofrece un método simple de "acción única" para obtener la ubicación del usuario: getCurrentPosition(). Si se realiza una llamada mediante este método, la ubicación actual del usuario se informará de manera asincrónica.
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 esta es la primera vez que una aplicación de este dominio solicita permisos, el navegador normalmente comprueba el consentimiento del usuario. Según el navegador, también puede haber preferencias para permitir o rechazar siempre la búsqueda de permisos, en cuyo caso se omite el proceso de confirmación.
Según el dispositivo de ubicación que se esté usando en el navegador, el objeto de posición podría contener mucha más información además de la latitud y la longitud; por ejemplo, podría incluir una altitud o una dirección. No podrás saber cuál es la información adicional que ese sistema de localización usará hasta que muestre 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 realizar un seguimiento constante de la ubicación del usuario, usa el método watchPosition() de la API de Geolocation. Funciona de manera similar a getCurrentPosition(), pero se activa varias veces a medida que el software de posicionamiento:
- Obtener una posició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 conocer la ubicación del usuario
- Si deseas obtener un dato más preciso sobre la ubicación del usuario.
- Tu aplicación debe actualizar la interfaz de usuario en función de la nueva información de ubicación.
- Tu aplicación necesita actualizar la lógica empresarial cuando el usuario ingresa a una zona definida determinada.
Prácticas recomendadas para usar la ubicación geográfica
Siempre desconecta y conserva batería
Detectar cambios en una ubicación geográfica no es una operación gratuita. Si bien los sistemas operativos pueden presentar funciones de plataforma para permitir que las aplicaciones se conecten al subsistema geo, 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, involucras al dispositivo en mucho procesamiento adicional.
Cuando ya no necesites realizar un seguimiento de la posición del usuario, llama a clearWatch para desactivar los sistemas de ubicación geográfica.
Controla los errores correctamente
Lamentablemente, no todas las búsquedas de ubicaciones se realizan correctamente. Es posible que no se pueda localizar un GPS o que el usuario inhabilite repentinamente las búsquedas de ubicaciones. En caso de error, se llama a un segundo argumento opcional para getCurrentPosition(), de modo que puedas notificar al usuario en 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; solo necesitas una estimación aproximada.
Usa la propiedad opcional maximumAge para indicarle al navegador que use un resultado de ubicación geográfica obtenido recientemente. De esta manera, no solo se muestra más rápido si el usuario solicitó los datos anteriormente, sino que también evita que el navegador inicie las interfaces del 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 dejes al usuario esperando; configura un tiempo de espera
A menos que establezcas un tiempo de espera, es posible que nunca recibas una respuesta a 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 ubicación detallada
Si deseas encontrar la tienda más cercana a la ubicación de 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 muestre lo más rápido posible.
Si necesitas un nivel alto de precisión, es posible anular la configuración predeterminada con la opción enableHighAccuracy. Usa esta función con moderación, ya que se resolverá más lento y consumirá 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);
};
Emula la ubicación geográfica con Chrome DevTools
Una vez que hayas configurado la ubicación geográfica, querrás:
- Prueba cómo funciona tu app en diferentes ubicaciones geográficas.
- Verifica que tu app se degrade con elegancia cuando no esté disponible la ubicación geográfica.
Puedes realizar ambas acciones desde Chrome DevTools.
- Abre las herramientas para desarrolladores de Chrome.
- Presiona Esc para Abrir el panel lateral de la consola.
- Abre el menú del panel lateral de Play Console
- Haz clic en la opción Sensors para mostrar la pestaña Sensors.
Desde aquí, puedes reemplazar la ubicación con una gran ciudad preestablecida, ingresar una ubicación personalizada o inhabilitar la ubicación geográfica fijando el reemplazo en Ubicación no disponible.