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 clara respuesta ante el gesto de un usuario.
- Usa la detección de funciones en el 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 usar la ubicación geográfica
- Descubre los casos en los que el usuario está cerca de su ubicación física 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 realizados entre los usuarios han demostrado que los usuarios no confían en los sitios que simplemente le solicitan al usuario que proporcione su posición durante la carga de la página. ¿Cuáles son las prácticas recomendadas?
Supone 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.
- Sé claro y explícito acerca de la necesidad de conocer la ubicación.
- Usa una solución de resguardo, si es necesario.
Usa una reserva si necesitas saber 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 requiere la ubicación actual del usuario, existen soluciones de terceros que te permiten obtener una mejor aproximación 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 no sean tan precisas, en especial si el usuario usa 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 comprendan 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.
Indica claramente al usuario que en una acción se le solicitará 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 muy 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. Conoces exactamente el momento en que los usuarios deshabilitan el acceso a su ubicación, pero no sabes cuándo te brindan acceso. Solo sabes que obtuviste acceso cuando aparecen los resultados.
Una práctica recomendada es “invitar” al usuario a la acción si necesitas que complete 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
Ahora la mayoría de los navegadores admiten la Geolocation API, pero se recomienda verificar siempre 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 se pueden configurar las preferencias para siempre permitir o no la búsqueda de permisos, en cuyo caso el proceso de confirmación se omitirá.
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 Geolocation API 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 según la nueva información de ubicación.
- Si tu app necesita actualizar la lógica comercial cuando el usuario ingresa a una zona definida.
Prácticas recomendadas para usar la ubicación geográfica
Siempre desconecta y conserva batería
Estar al tanto de los cambios en una ubicación geográfica no es una operación que no tenga un costo. 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 son exitosas. Es posible que no se pueda localizar un GPS o que el usuario inhabilite repentinamente las búsquedas de ubicaciones. En caso de que se produzca un error, se llamará a un segundo argumento opcional a getCurrentPosition() para 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
Para 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 este modo, no solo se obtienen los resultados más rápidamente si el usuario solicitó los datos anteriormente, sino que también evita que el navegador tenga que iniciar 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 dejes al usuario esperando; configura un tiempo de espera
A menos que establezcas un tiempo de espera, es posible que nunca obtengas respuesta a tu solicitud para obtener 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);
};
Da preferencia a las ubicaciones comunes en lugar de las ubicaciones específicas
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 no 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 resuelve más lentamente 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);
};
Emula la ubicación geográfica con Chrome DevTools
Una vez que hayas configurado la ubicación geográfica, querrás hacer lo siguiente:
- Probar 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.