Presentamos el elemento HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Publicación: 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 un indicador más sólido 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 un debate riguroso con la comunidad de estándares web. Para comprender la utilidad de este elemento, es importante examinar la historia 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 <permission> genérico con un atributo type (consulta el explicador original). El valor del 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 ubicación geográfica.

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 verificar la hipótesis de que un botón dedicado y contextual mejoraría la confianza y la toma de decisiones de los usuarios.

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

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

Redefinición del diseño

Si bien el concepto resultó exitoso, la implementación requirió perfeccionamiento. 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 de la capacidad y segmentados (consulta el debate de WICG). El elemento <geolocation> es el primero de estos controles especializados que se lanza. Además, estamos desarrollando un elemento <usermedia> dedicado (para el acceso a la cámara y al micrófono), que tiene su propio prueba de origen independiente.

A diferencia de la propuesta original, que se enfocaba en administrar el estado del permiso (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 elemento <geolocation>?

Actualmente, los flujos de trabajo de ubicación geográfica dependen de la API de Geolocation, que activa mensajes de permiso que pueden interrumpir a los usuarios si se activan fuera de contexto o incluso al cargar la página. Es fundamental tener en cuenta que la dependencia de estas instrucciones imperativas es cada vez menos viable debido a las intervenciones de los navegadores. Por ejemplo, Chrome bloquea activamente las solicitudes de permisos si un usuario descartó el mensaje tres veces, lo que impone un bloqueo silencioso temporal que dura inicialmente una semana. Esto significa que el código heredado que intente activar un mensaje puede fallar de forma silenciosa, lo que dejará al usuario con una experiencia interrumpida y sin una forma clara de habilitar la función. Además, las instrucciones estándar suelen carecer de contexto. Si aparece un mensaje de forma inesperada, es posible que los usuarios lo bloqueen 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 el principal factor que genera altas tasas de rechazo.

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

• Intención y momento claros: Cuando hace clic en un botón de usar la ubicación, el usuario indica explícitamente su intención de usar su ubicación en ese momento específico. Esto indica que comprenden el valor y que quieren usar la ubicación de forma activa, lo que convierte un posible bloqueo en una interacción exitosa.
• Recuperación simplificada: Si un usuario bloqueó previamente el acceso a la ubicación cuando navegaba por un sitio (quizás por accidente o falta de contexto), hacer clic en el elemento activa un flujo de recuperación especializado. Esto les permite volver a habilitar la ubicación en el momento en que realmente quieren usarla, sin la fricción de navegar profundamente en 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, ya que recupera datos nuevos de inmediato sin volver a solicitar el permiso.

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 actual del permiso ya lo permite (para evitar mensajes inesperados).
• accuracymode: Acepta un valor de "precise" o "approximate", que corresponde a la opción estándar enableHighAccuracy.
• 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 devuelve el objeto GeolocationPosition una vez que está disponible.
• error: Es una propiedad de solo lectura que devuelve 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 elemento <geolocation> aplica restricciones de diseño específicas similares al experimento anterior del elemento <permission>. Si bien puedes personalizar el botón para que coincida con el tema de su sitio, el navegador aplica varias medidas de protección:

• Legibilidad: Se verifica que los colores del texto y el fondo tengan suficiente contraste (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. Los márgenes negativos o los desplazamientos de contorno están inhabilitados para evitar que el elemento se oculte visualmente o se superponga con otro contenido de forma engañosa.
• Integridad visual: Los efectos de distorsión son limitados. Por ejemplo, la transformación solo admite traslaciones 2D y ajuste proporcional.
• Seudoclases de CSS: El elemento admite el diseño basado en estados, como :granted (cuando el permiso está activo).

Estrategia de mejora progresiva

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

El elemento está diseñado para degradarse de forma elegante. Los navegadores que no admiten el elemento <geolocation> lo tratarán como un [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement). Es importante destacar que, si el navegador admite el elemento, no renderizará los elementos secundarios. Esto permite escribir el código HTML de forma limpia para los navegadores compatibles y no compatibles.

Patrón de resguardo personalizado

Si quieres controlar por completo la experiencia de resguardo, puedes usar elementos secundarios, como un botón, que conectes 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>

Polyfill

Como alternativa, puedes instalar un polyfill desde npm que reemplace de forma transparente y automática todas las ocurrencias de <geolocation> por un elemento personalizado <geo-location> (ten en cuenta el guion) respaldado por la API de Geolocation de JavaScript normal. Si el navegador admite el elemento <geolocation>, el polyfill simplemente no hace nada. Consulta esta demostración 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 características

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 complace ver cómo los desarrolladores implementarán más situaciones de reintento de ubicación con mejor rendimiento usando el nuevo elemento HTML <geolocation>. Representa un cambio hacia elementos específicos de la capacidad que se adaptan a la forma en que los usuarios realmente usan la Web hoy en día.

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 para la cámara y el micrófono.

Vínculos relacionados

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

Agradecimientos

Andy Paicu, Gilberto Cocchi y Rachel Andrew revisaron este documento.