Das neue HTML-Geolocation-Element

Wenn Sie jemals navigator.geolocation.getCurrentPosition() implementiert haben, kennen Sie die Routine: Callback schreiben, Fehlerbehandlung implementieren, Berechtigungsstatus verwalten und hoffen, dass der Browser die Abfrage nicht stillschweigend unterdrückt, weil der Benutzer sie zu oft abgelehnt hat. Das neue <geolocation>-HTML-Element verfolgt einen völlig anderen Ansatz – deklarative Geolokalisierung in HTML, die vom Browser selbst verwaltet wird.

Hier erfahren Sie, was es ist, wie es funktioniert und was Sie vor der Verwendung wissen müssen.

Was ist das <geolocation>-HTML-Element?

Das <geolocation>-HTML-Element ist eine experimentelle, vom Browser gesteuerte Schaltfläche, mit der Benutzer ihren Standort direkt von der Seite aus teilen können. Anstatt dass Ihr JavaScript eine Berechtigungsabfrage auslöst, aktiviert der Benutzer das Steuerelement selbst. Der Browser übernimmt den Berechtigungsablauf, und Sie lauschen auf das Ergebnis.

Es wurde in Chrome 144 ausgeliefert. Stand Anfang 2026 bleibt dies eine von Chromium angeführte Funktion und wurde noch nicht in anderen Engines implementiert. Behandeln Sie es als etwas zum Experimentieren, nicht zum universellen Einsatz ohne Fallback. Den aktuellen Implementierungsstatus können Sie unter https://caniuse.com/mdn-html_elements_geolocation verfolgen.

Das Problem mit der Geolocation API

Die navigator.geolocation-API ist imperativ. Ihr Script ruft getCurrentPosition() auf, der Browser entscheidet, ob eine Abfrage angezeigt wird, und wenn der Benutzer diese Abfrage mehrmals abgelehnt hat, blockiert Chrome sie möglicherweise stillschweigend für einen bestimmten Zeitraum. Kein Fehler, kein Feedback – nur Stille.

Die fehlende Kontextinformation verschlimmert die Situation. Eine Abfrage, die ohne Erklärung erscheint, wird reflexartig abgelehnt. Diese Ablehnung kann dauerhaft werden, und es gibt keine offensichtliche Möglichkeit für Benutzer, sie rückgängig zu machen.

Wie deklarative Geolokalisierung in HTML dies löst

Das <geolocation>-Element dreht das Modell um. Der Benutzer klickt auf die Schaltfläche. Dieser Klick ist das Berechtigungssignal. Der Browser weiß, dass die Anfrage von einer bewussten Benutzeraktion ausging, was hilft, Szenarien stiller Blockierung zu vermeiden und Benutzern einen klareren Wiederherstellungspfad bietet, falls sie den Zugriff zuvor verweigert haben.

Das HTMLGeolocationElement-Interface stellt das Ergebnis direkt am Element bereit:

<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);
  }
}

Das Element stellt die Properties position und error bereit, und Sie lauschen auf Events wie location, wenn der Browser ein Ergebnis zurückgibt.

Wichtige Attribute

• autolocate — Wenn die Berechtigung zuvor erteilt wurde, wird das location-Event beim Laden der Seite ausgelöst, ohne dass ein Klick erforderlich ist. Hat keine Wirkung, wenn die Berechtigung noch nicht erteilt wurde.
• watch — Entspricht watchPosition() und wird kontinuierlich ausgelöst, während sich das Gerät bewegt.
• accuracymode — Akzeptiert "precise" oder "approximate". Der Präzisionsmodus entspricht enableHighAccuracy: true und ändert das Schaltflächensymbol zu einem Fadenkreuz. Beachten Sie, dass auf Desktop-Systemen der Unterschied oft vernachlässigbar ist – testen Sie auf einem mobilen Gerät im Freien, um echte Abweichungen zu sehen.

Eine Besonderheit, die Sie kennen sollten: Sie können nur bis zu drei <geolocation>-Elemente pro Seite verwenden. Überschreiten Sie diese Anzahl, funktionieren alle nicht mehr.

Das Element basiert weiterhin auf demselben zugrunde liegenden Sicherheitsmodell wie die Geolocation API, das einen sicheren Kontext (HTTPS) und explizite Benutzererlaubnis erfordert.

Geolocation API vs. HTML-Geolocation-Element: Was sollten Sie verwenden?

Derzeit beides. Das <geolocation>-HTML-Element ersetzt navigator.geolocation nicht – es umschließt es. Verwenden Sie das Element, wo es unterstützt wird, und implementieren Sie einen eleganten Fallback:

<geolocation onlocation="updateMap()">
  <!-- Wird nur in Browsern gerendert, die <geolocation> nicht unterstützen -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Meinen Standort verwenden
  </button>
</geolocation>

Unterstützende Browser unterdrücken den untergeordneten Inhalt. Nicht unterstützende Browser rendern die Fallback-Schaltfläche. Wenn Sie einen automatisierteren Ansatz wünschen, gibt es ein Polyfill auf npm, das ein Custom Element einsetzt, das auf der Standard-API basiert.

Feature Detection ist unkompliziert:

if ('HTMLGeolocationElement' in window) {
  // Element wird unterstützt
} else {
  // navigator.geolocation verwenden
}

Styling hat harte Grenzen

Das Element sieht aus wie eine Schaltfläche, verhält sich aber aus CSS-Perspektive nicht wie eine. Der Browser setzt Einschränkungen durch, um irreführende Muster zu verhindern: opacity ist auf 1 festgelegt, der Kontrast zwischen Text und Hintergrund muss mindestens 3:1 betragen, und verzerrende Transformationen werden blockiert. Wenn Kontrast oder Schriftgröße unter den Mindestschwellenwert fallen, wird die Schaltfläche nicht visuell deaktiviert – sie funktioniert einfach nicht mehr. Sie können die :granted-Pseudoklasse verwenden, um die Schaltfläche nach erteilter Berechtigung zu stylen.

Wohin dies führt

Das <geolocation>-Element ist das erste in einer geplanten Serie von funktionsspezifischen Elementen. Ein <usermedia>-Element für Kamera- und Mikrofonzugriff befindet sich bereits im Origin Trial. Das Muster – deklarativ, vom Benutzer initiiert, vom Browser vermittelt – ist eindeutig die Richtung, in die sich die Plattform bewegt.

Fazit

Das <geolocation>-Element stellt einen bedeutenden Wandel dar, wie Browser mit sensiblen Berechtigungen umgehen. Indem der Auslöser vom Script zur Benutzeraktion verschoben wird, umgeht es viele der Fallstricke stiller Blockierung der imperativen API und gibt Benutzern klarere Kontrolle darüber, wann und ob sie ihren Standort teilen. Die Browser-Unterstützung ist noch begrenzt, aber das Fallback-Muster ist sauber und die API-Oberfläche minimal. Beginnen Sie noch heute mit Progressive Enhancement zu experimentieren – die Berechtigungs-UX ist für Benutzer wirklich besser, und das deklarative Modell ist die Richtung, in die sich die Webplattform bewegt.

FAQs

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.