El Nuevo Elemento HTML Geolocation

Si alguna vez has configurado navigator.geolocation.getCurrentPosition(), conoces la rutina: escribir el callback, manejar el error, gestionar el estado de permisos y esperar que el navegador no suprima silenciosamente el prompt porque el usuario lo descartó demasiadas veces. El nuevo elemento HTML <geolocation> adopta un enfoque completamente diferente: geolocalización declarativa en HTML, gestionada por el propio navegador.

A continuación, te explicamos qué es, cómo funciona y qué necesitas saber antes de usarlo.

¿Qué Es el Elemento HTML <geolocation>?

El elemento HTML <geolocation> es un botón experimental controlado por el navegador que permite a los usuarios compartir su ubicación directamente desde la página. En lugar de que tu JavaScript active un prompt de permisos, el usuario activa el control por sí mismo. El navegador gestiona el flujo de permisos y tú escuchas el resultado.

Se lanzó en Chrome 144. A principios de 2026, esta sigue siendo una característica liderada por Chromium y aún no ha sido implementada en otros motores. Trátala como algo con lo que experimentar, no como algo para implementar universalmente sin un fallback. Puedes seguir el estado actual de implementación en https://caniuse.com/mdn-html_elements_geolocation.

El Problema con la API de Geolocalización

La API navigator.geolocation es imperativa. Tu script llama a getCurrentPosition(), el navegador decide si mostrar un prompt, y si el usuario ha descartado ese prompt varias veces, Chrome puede bloquearlo silenciosamente durante un período de tiempo. Sin error, sin retroalimentación—solo silencio.

La brecha de contexto lo empeora. Un prompt que aparece sin explicación se niega reflexivamente. Esa negación puede volverse persistente, y no hay una forma obvia para que los usuarios la deshagan.

Cómo la Geolocalización Declarativa en HTML Resuelve Esto

El elemento <geolocation> invierte el modelo. El usuario hace clic en el botón. Ese clic es la señal de permiso. El navegador sabe que la solicitud provino de una acción deliberada del usuario, lo que ayuda a evitar escenarios de bloqueo silencioso y proporciona a los usuarios una ruta de recuperación más clara si previamente negaron el acceso.

La interfaz HTMLGeolocationElement expone el resultado directamente en el elemento:

<geolocation onlocation="handleLocation(event)"></geolocation>

function handleLocation(event) {
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log(latitude, longitude);
  } else if (event.target.error) {
    console.error(event.target.error.message);
  }
}

El elemento expone las propiedades position y error, y escuchas eventos como location cuando el navegador devuelve un resultado.

Atributos Clave

• autolocate — Si el permiso fue otorgado previamente, dispara el evento location al cargar la página sin requerir un clic. No hace nada si el permiso aún no ha sido otorgado.
• watch — Refleja watchPosition(), disparando continuamente a medida que el dispositivo se mueve.
• accuracymode — Acepta "precise" o "approximate". El modo preciso corresponde a enableHighAccuracy: true y cambia el ícono del botón a una cruz de mira. Ten en cuenta que en escritorios la diferencia suele ser insignificante—prueba en un dispositivo móvil al aire libre para ver una variación real.

Una peculiaridad que vale la pena conocer: solo puedes usar hasta tres elementos <geolocation> por página. Si excedes ese número, todos dejan de funcionar.

El elemento todavía se basa en el mismo modelo de seguridad subyacente que la API de Geolocalización, que requiere un contexto seguro (HTTPS) y permiso explícito del usuario.

API de Geolocalización vs Elemento HTML Geolocation: ¿Cuál Deberías Usar?

Por ahora, ambos. El elemento HTML <geolocation> no reemplaza a navigator.geolocation—lo envuelve. Usa el elemento donde esté soportado, y recurre a un fallback elegante:

<geolocation onlocation="updateMap()">
  <!-- Renderizado solo en navegadores que no soportan <geolocation> -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Usar mi ubicación
  </button>
</geolocation>

Los navegadores compatibles suprimen el contenido hijo. Los navegadores no compatibles renderizan el botón de fallback. Si deseas un enfoque más automatizado, hay un polyfill en npm que intercambia un elemento personalizado respaldado por la API estándar.

La detección de características es sencilla:

if ('HTMLGeolocationElement' in window) {
  // elemento soportado
} else {
  // usar navigator.geolocation
}

El Estilo Tiene Límites Estrictos

El elemento parece un botón pero no se comporta como tal desde una perspectiva CSS. El navegador aplica restricciones para prevenir patrones engañosos: opacity está bloqueada en 1, el contraste entre texto y fondo debe ser de al menos 3:1, y las transformaciones distorsionantes están bloqueadas. Si el contraste o el tamaño de fuente cae por debajo del umbral mínimo, el botón no se desactiva visualmente—simplemente deja de funcionar. Puedes usar la pseudo-clase :granted para estilizar el botón después de que se otorgue el permiso.

Hacia Dónde Se Dirige Esto

El elemento <geolocation> es el primero en una serie planificada de elementos específicos de capacidades. Un elemento <usermedia> para acceso a cámara y micrófono ya está en prueba de origen. El patrón—declarativo, iniciado por el usuario, mediado por el navegador—es claramente la dirección hacia la que se mueve la plataforma.

Conclusión

El elemento <geolocation> representa un cambio significativo en cómo los navegadores manejan permisos sensibles. Al mover el disparador del script a la acción del usuario, evita muchas de las trampas de bloqueo silencioso de la API imperativa y proporciona a los usuarios un control más claro sobre cuándo y si comparten su ubicación. El soporte del navegador todavía es limitado, pero el patrón de fallback es limpio y la superficie de la API es mínima. Comienza a experimentar con mejora progresiva hoy—la UX de permisos es genuinamente mejor para los usuarios, y el modelo declarativo es hacia donde se dirige la plataforma web.

Preguntas Frecuentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.