Presentamos el elemento HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Publicado el 13 de enero de 2026

A partir de Chrome 144, puedes usar el nuevo elemento HTML <geolocation>. Este elemento representa un cambio importante en la forma en que los sitios solicitan datos de ubicación del usuario, ya que se aleja de las indicaciones de permisos activadas por secuencias de comandos y se acerca a una experiencia declarativa y orientada a la acción del usuario. Reduce el código estándar necesario para controlar los estados y errores de los permisos, y proporciona una señal más sólida de la intención del usuario, lo que ayuda a evitar las intervenciones del navegador (como los bloqueos silenciosos).

Este lanzamiento es el resultado de pruebas exhaustivas en el mundo real y de debates rigurosos con la comunidad de estándares web. Para comprender la utilidad de este elemento, es importante examinar el historial de su desarrollo y los datos que impulsaron su diseño.

De <permission> genérico a <geolocation> específico

El elemento <geolocation> es la evolución más reciente de la iniciativa de control de permisos incorporado en la página, en la que inicialmente se propuso como un elemento genérico <permission> con un atributo type (consulta la explicación original). El valor de el atributo type (por ejemplo, "geolocation") determinaría el tipo de permiso solicitado. Por ejemplo, la propuesta inicial incluye valores como cámara, micrófono y geolocalización.

Validación del concepto

Ejecutamos una prueba de origen para el elemento genérico <permission> de Chrome 126 a 143. El objetivo de esta prueba era probar la hipótesis de que un botón dedicado, contextual mejoraría la confianza y la toma de decisiones del usuario.

Los resultados de esta prueba de origen respaldaron la validación de este concepto central:

• Zoom informó una disminución del 46.9% en los errores de captura de la cámara o el micrófono (como los bloqueadores a nivel del sistema) mediante el uso del elemento para guiar a los usuarios durante la recuperación.
• Immobiliare.it registró un aumento del 20% en los flujos de geolocalización exitosos.
• ZapImóveis observó una tasa de éxito del 54.4% en los usuarios que se recuperaron de un estado "bloqueado anteriormente" cuando se les presentó el elemento.

Redefinición del diseño

Si bien el concepto resultó exitoso, la implementación requirió un perfeccionamiento. Los comentarios de los proveedores de navegadores, incluidos Apple (Safari/WebKit) y Mozilla (Firefox), indicaron que un elemento "universal" introdujo una complejidad significativa en relación con los comportamientos de capacidades únicas.

En consecuencia, pasamos de un control de permisos genérico a elementos específicos y orientados a las capacidades, (consulta el debate de WICG). El <geolocation> elemento es el primero de estos controles especializados que se lanza. Después de esto, también estamos desarrollando un elemento <usermedia> dedicado (para el acceso a la cámara y al micrófono), que tiene su propia prueba de origen independiente.

A diferencia de la propuesta original, que se centró en administrar el estado de los permisos (es decir, permitir o rechazar), estos nuevos elementos funcionan como mediadores de datos, lo que reemplaza de manera efectiva la necesidad de llamar directamente a las APIs de JavaScript para la mayoría de los casos de uso.

¿Por qué usar el <geolocation> elemento?

Actualmente, los flujos de geolocalización se basan en la API de Geolocation, que activa solicitudes de permisos que pueden interrumpir a los usuarios si se activan fuera de contexto o incluso en la carga de la página. Es fundamental que la dependencia de estas solicitudes imperativas sea cada vez menos viable debido a las intervenciones del navegador. Por ejemplo, Chrome bloquea de forma activa las solicitudes de permisos si un usuario descartó la solicitud tres veces, lo que aplica un bloqueo silencioso temporal que dura una semana. Esto significa que el código heredado que intenta activar una solicitud puede fallar de forma silenciosa, lo que deja al usuario con una experiencia interrumpida y sin una forma clara de habilitar la función. Además, las solicitudes estándar suelen carecer de contexto. Si aparece una solicitud de forma inesperada, los usuarios pueden bloquearla de forma reflexiva o accidental, sin saber que esta decisión crea un bloqueo permanente que es difícil de revertir. Esta brecha de contexto, en lugar de la función en sí, es un factor principal de las altas tasas de rechazo.

El elemento <geolocation> resuelve el problema de la brecha de contexto, ya que garantiza que las solicitudes se inicien estrictamente por el usuario. Este modelo proporciona tres ventajas distintas:

• Intención y sincronización claras: Cuando hace clic en un botón Usar ubicación, el usuario indica de forma explícita su intención de usar su ubicación en ese momento específico. Esto indica que comprende el valor y que desea usar la ubicación de forma activa, lo que convierte un bloqueo potencial en una interacción exitosa.
• Recuperación simplificada: Si un usuario bloqueó previamente el acceso a la ubicación mientras navegaba por un sitio (quizás por accidente o falta de contexto), al hacer clic en el elemento, se activa un flujo de recuperación especializado. Esto les ayuda a volver a habilitar la ubicación en el momento en que realmente quieren usarla, sin la fricción de navegar en profundidad por la configuración del sitio del navegador.
• Actualización automática: Si ya se otorgó el permiso, hacer clic en el elemento actúa como un botón de actualización, que recupera datos nuevos de inmediato sin volver a solicitarlo.

Implementación

La integración del elemento requiere mucho menos código estándar que la API de JavaScript. En lugar de administrar las devoluciones de llamada y los estados de error de forma manual, los desarrolladores pueden agregar la etiqueta a la página y escuchar el evento onlocation.

<geolocation
  onlocation="handleLocation(event)"
  autolocate
  accuracymode="precise">
</geolocation>

function handleLocation(event) {
  // Directly access the GeolocationPosition object on the element
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log("Location retrieved:", latitude, longitude);
  } else if (event.target.error) {
    console.error("Error:", event.target.error.message);
  }
}

Atributos y propiedades clave

• autolocate: Intenta recuperar la ubicación automáticamente cuando se carga el elemento, pero solo si el estado de permiso actual ya lo permite (lo que evita solicitudes inesperadas).
• accuracymode: Acepta un valor de "precise" o "approximate", que corresponde a la opción enableHighAccuracy estándar.
• watch: Cambia el comportamiento para que coincida con watchPosition(), y activa eventos de forma continua a medida que el usuario se mueve.
• position: Es una propiedad de solo lectura en el elemento DOM que muestra el objeto GeolocationPosition una vez que está disponible.
• error: Es una propiedad de solo lectura que muestra un GeolocationPositionError si falla la solicitud.

Restricciones de diseño

Para garantizar la confianza del usuario y evitar patrones de diseño engañosos, el <geolocation> elemento aplica restricciones de diseño específicas similares al experimento anterior del <permission> elemento. Si bien puedes personalizar el botón para que coincida con el tema de su sitio, el navegador aplica varios parámetros de protección:

• Legibilidad: Se verifican los colores de texto y de fondo para garantizar un contraste suficiente (por lo general, una proporción de al menos 3:1) para garantizar que la solicitud de permiso siempre sea legible. Además, el canal alfa (opacidad) debe establecerse en 1 para evitar que el elemento sea engañosamente transparente.
• Tamaño y espaciado: El elemento aplica límites mínimos y máximos para el ancho, la altura y el tamaño de la fuente. Se inhabilitan los márgenes negativos o los desplazamientos de contorno para evitar que el elemento se oculte visualmente o se superponga a otro contenido de forma engañosa.
• Integridad visual: Los efectos de distorsión son limitados. Por ejemplo, la transformación solo admite traducciones 2D y escalamiento proporcional.
• Seudoclases de CSS: El elemento admite diseño basado en el estado, como :granted (cuando el permiso está activo).

Estrategia de mejora progresiva

Sabemos que la estandarización de nuevos elementos HTML es un proceso gradual. Sin embargo, los desarrolladores pueden adoptar el <geolocation> elemento hoy mismo sin interrumpir compatibilidad para los usuarios en otros navegadores.

El elemento está diseñado para degradarse de forma elegante. Los navegadores que no admiten el <geolocation> elemento lo tratarán como un HTMLUnknownElement. Es importante destacar que, si el navegador admite el elemento, no renderizará los elementos secundarios. Esto permite escribir el HTML de forma limpia para los navegadores compatibles y no compatibles.

Patrón de resguardo personalizado

Si deseas controlar por completo la experiencia de resguardo, puedes usar elementos secundarios, como un botón que conectas con la API de Geolocation de JavaScript normal.

<geolocation onlocation="updateMap()">
  <!-- Fallback contents if the element is not supported -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Use my location
  </button>
</geolocation>

Prueba cómo funciona el comportamiento con un ejemplo básico.

Polyfill

Como alternativa, puedes instalar un polyfill desde npm que reemplaza de forma transparente y automática todas las instancias de <geolocation> por un elemento personalizado <geo-location> (observa el guion) respaldado por la API de Geolocation de JavaScript normal. Si el navegador admite el <geolocation> elemento, el polyfill no hace nada. Consulta esta demostración de polyfill que muestra el polyfill en acción. El código fuente está en GitHub.

if (!('HTMLGeolocationElement' in window)) {
  await import('https://unpkg.com/geolocation-element-polyfill/index.js');
}

<geolocation onlocation="updateMap()"></geolocation>

Detección de funciones

Para una lógica más compleja, puedes detectar la compatibilidad de forma programática con la interfaz:

if ('HTMLGeolocationElement' in window) {
  // Use modern <geolocation> element logic
} else {
  // Fallback to legacy navigator.geolocation API
}

Conclusión

Nos entusiasma ver cómo los desarrolladores implementarán situaciones de reintento de ubicación más eficientes con el nuevo <geolocation> elemento HTML. Representa un cambio hacia elementos específicos de capacidades que se adaptan a la forma en que los usuarios usan la Web en la actualidad.

Para otros casos de uso de permisos, a partir de Chrome 144, puedes unirte a la prueba de origen del elemento HTML <usermedia>, que brinda los mismos beneficios ergonómicos a la cámara y al micrófono.

Vínculos relacionados

• El elemento <geolocation> en el estado de la plataforma de Chrome
• Explicación del elemento HTML de geolocalización
• Página de demostración
• Posición de los estándares de Mozilla
• Posición de los estándares de WebKit

Agradecimientos

Este documento fue revisado por Andy Paicu, Gilberto Cocchi y Rachel Andrew.