Das HTML-Element <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Veröffentlicht am 13. Januar 2026

Ab Chrome 144 können Sie das neue <geolocation> HTML-Element verwenden. Dieses Element stellt eine große Veränderung bei der Art und Weise dar, wie Websites Standortdaten von Nutzern anfordern. Es ersetzt skriptgesteuerte Berechtigungsaufforderungen durch eine deklarative, nutzerorientierte Erfahrung. Es reduziert den Boilerplate-Code, der zum Verarbeiten von Berechtigungsstatus und Fehlern erforderlich ist, und liefert ein stärkeres Signal für die Absicht des Nutzers, wodurch Browsereingriffe (z. B. Quiet Blocks) vermieden werden können.

Diese Einführung ist das Ergebnis umfangreicher Tests in der Praxis und intensiver Diskussionen mit der Webstandards-Community. Um den Nutzen dieses Elements zu verstehen, ist es wichtig, die Geschichte seiner Entwicklung und die Daten zu untersuchen, die sein Design beeinflusst haben.

Vom generischen <permission> zum spezifischen <geolocation>

Das <geolocation> Element ist die neueste Entwicklung der Page-Embedded Permission Control Initiative, wo es ursprünglich als generisches <permission> Element mit einem type Attribut vorgeschlagen wurde (siehe die originale Erläuterung). Der Wert des Attributs „type“ (z. B. "geolocation") bestimmt die Art der angeforderten Berechtigung. Der ursprüngliche Vorschlag enthielt beispielsweise Werte wie „camera“, „microphone“ und „geolocation“.

Validierung des Konzepts

Wir haben von Chrome 126 bis 143 einen Ursprungstest für das generische <permission>-Element durchgeführt. Ziel dieses Tests war es, die Hypothese zu prüfen, dass eine spezielle, kontextbezogene Schaltfläche das Vertrauen der Nutzer und die Entscheidungsfindung verbessern würde.

Die Ergebnisse dieses Ursprungstests bestätigten die Validierung dieses Kernkonzepts:

• Zoom verzeichnete eine um 46,9% geringere Anzahl von Fehlern bei der Erfassung von Kamera- oder Mikrofondaten (z. B. Blocker auf Systemebene), indem das Element verwendet wurde, um Nutzer durch die Wiederherstellung zu führen.
• Immobiliare.it verzeichnete eine Steigerung der erfolgreichen Geolocation-Abläufe um 20 %.
• ZapImóveis beobachtete eine Erfolgsrate von 54,4% bei Nutzern, die sich aus dem Status „zuvor blockiert“ erholten, als ihnen das Element präsentiert wurde.

Neudefinition des Designs

Das Konzept erwies sich zwar als erfolgreich, die Implementierung musste jedoch verfeinert werden. Das Feedback von Browseranbietern, darunter Apple (Safari/WebKit) und Mozilla (Firefox), deutete darauf hin, dass ein universelles Element erhebliche Komplexität in Bezug auf das Verhalten einzelner Funktionen mit sich brachte.

Daher haben wir von einer generischen Berechtigungssteuerung zu gezielten, funktionsspezifischen Elementen gewechselt (siehe WICG Diskussion). Das <geolocation> Element ist das erste dieser speziellen Steuerelemente, das eingeführt wird. Außerdem entwickeln wir ein spezielles <usermedia>-Element (für den Zugriff auf Kamera und Mikrofon), für das ein eigener Ursprungstest durchgeführt wird.

Im Gegensatz zum ursprünglichen Vorschlag, der sich auf die Verwaltung des Berechtigungsstatus konzentrierte (d. h. zulassen oder ablehnen), fungieren diese neuen Elemente als Datenvermittler. Dadurch ist es in den meisten Anwendungsfällen nicht mehr erforderlich, die JavaScript APIs direkt aufzurufen.

Warum das <geolocation> Element verwenden?

Derzeit basieren Geolocation-Abläufe auf der Geolocation API, die Berechtigungsaufforderungen auslöst, die Nutzer unterbrechen können, wenn sie außerhalb des Kontexts oder sogar beim Seitenaufbau ausgelöst werden. Die Abhängigkeit von diesen imperativen Aufforderungen wird aufgrund von Browsereingriffen immer weniger praktikabel. Chrome blockiert beispielsweise Berechtigungsanfragen aktiv, wenn ein Nutzer die Aufforderung dreimal abgelehnt hat. Dadurch wird ein temporärer Quiet Block erzwungen, der zunächst eine Woche dauert. Das bedeutet, dass älterer Code, der versucht, eine Aufforderung auszulösen, möglicherweise im Hintergrund fehlschlägt. Der Nutzer hat dann eine fehlerhafte Erfahrung und keine klare Möglichkeit, die Funktion zu aktivieren. Außerdem fehlt es Standardaufforderungen oft an Kontext. Wenn eine Aufforderung unerwartet angezeigt wird, blockieren Nutzer sie möglicherweise reflexartig oder versehentlich, ohne zu wissen, dass diese Entscheidung eine dauerhafte Blockierung verursacht, die nur schwer rückgängig gemacht werden kann. Diese Kontextlücke und nicht die Funktion selbst ist ein Hauptgrund für hohe Ablehnungsraten.

Das <geolocation> Element löst das Problem der Kontextlücke, indem sichergestellt wird, dass Anfragen ausschließlich vom Nutzer initiiert werden. Dieses Modell bietet drei entscheidende Vorteile:

• Klare Absicht und Zeitpunkt: Wenn der Nutzer auf die Schaltfläche Standort verwenden klickt, signalisiert er ausdrücklich seine Absicht, seinen Standort in diesem Moment zu verwenden. Das zeigt, dass er den Wert versteht und den Standort aktiv verwenden möchte. So wird eine potenzielle Blockierung in eine erfolgreiche Interaktion umgewandelt.
• Vereinfachte Wiederherstellung: Wenn ein Nutzer den Standortzugriff beim Surfen auf einer Website zuvor blockiert hat (vielleicht versehentlich oder ohne Kontext), löst ein Klick auf das Element einen speziellen Wiederherstellungsablauf aus. So kann er den Standortzugriff wieder aktivieren, wenn er ihn tatsächlich verwenden möchte, ohne sich durch die tiefen Einstellungen des Browsers navigieren zu müssen.
• Automatische Aktualisierung: Wenn die Berechtigung bereits erteilt wurde, fungiert ein Klick auf das Element als Aktualisierungsschaltfläche. Neue Daten werden sofort abgerufen, ohne dass eine erneute Aufforderung erfolgt.

Implementierung

Die Integration des Elements erfordert deutlich weniger Boilerplate-Code als die JavaScript API. Anstatt Rückrufe und Fehlerstatus manuell zu verwalten, können Entwickler das Tag der Seite hinzufügen und auf das Ereignis onlocation warten.

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

Wichtige Attribute und Eigenschaften

• autolocate: Versucht automatisch, den Standort abzurufen, wenn das Element geladen wird. Dies erfolgt jedoch nur, wenn der aktuelle Berechtigungsstatus dies bereits zulässt (um unerwartete Aufforderungen zu vermeiden).
• accuracymode: Akzeptiert den Wert "precise" oder "approximate", der der Standardoption enableHighAccuracy entspricht.
• watch: Ändert das Verhalten so, dass es watchPosition() entspricht. Ereignisse werden kontinuierlich ausgelöst, wenn sich der Nutzer bewegt.
• position: Eine schreibgeschützte Eigenschaft des DOM-Elements, die das Objekt GeolocationPosition zurückgibt, sobald es verfügbar ist.
• error: Eine schreibgeschützte Eigenschaft, die ein GeolocationPositionError zurückgibt, wenn die Anfrage fehlschlägt.

Stileinschränkungen

Um das Vertrauen der Nutzer zu stärken und irreführende Designmuster zu vermeiden, gelten für das <geolocation> Element bestimmte Stileinschränkungen, ähnlich wie beim früheren <permission> Element-Experiment. Sie können die Schaltfläche zwar an das Design Ihrer Website anpassen, der Browser erzwingt jedoch mehrere Schutzmaßnahmen:

• Lesbarkeit: Text- und Hintergrundfarben werden auf ausreichenden Kontrast geprüft (in der Regel ein Verhältnis von mindestens 3:1), damit die Berechtigungsanfrage immer lesbar ist. Außerdem muss der Alphakanal (Deckkraft) auf 1 gesetzt sein, damit das Element nicht irreführend transparent ist.
• Größe und Abstand: Für Breite, Höhe und Schriftgröße des Elements werden Mindest- und Höchstwerte erzwungen. Negative Ränder oder Umrissversätze sind deaktiviert, damit das Element nicht visuell verdeckt wird oder andere Inhalte irreführend überlappt.
• Visuelle Integrität: Verzerrende Effekte sind begrenzt. „transform“ unterstützt beispielsweise nur 2D-Übersetzungen und proportionale Skalierung.
• CSS-Pseudoklassen: Das Element unterstützt zustandsbasiertes Styling, z. B. :granted (wenn die Berechtigung aktiv ist).

Strategie für Progressive Enhancement

Wir wissen, dass die Standardisierung neuer HTML-Elemente ein schrittweiser Prozess ist. Entwickler können das <geolocation> Element jedoch schon heute verwenden, ohne die Kompatibilität für Nutzer anderer Browser zu beeinträchtigen.

Das Element ist so konzipiert, dass es sich schrittweise verschlechtert. Browser, die das <geolocation> Element nicht unterstützen, behandeln es als HTMLUnknownElement. Wichtig ist, dass untergeordnete Elemente nicht gerendert werden, wenn der Browser das Element unterstützt. So kann der HTML-Code sowohl für unterstützte als auch für nicht unterstützte Browser sauber geschrieben werden.

Benutzerdefiniertes Fallback-Muster

Wenn Sie die Fallback-Erfahrung vollständig selbst steuern möchten, können Sie untergeordnete Elemente wie eine Schaltfläche verwenden, die Sie mit der regulären JavaScript Geolocation API verknüpfen.

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

Testen Sie das Verhalten anhand eines einfachen Beispiels.

Polyfill

Alternativ können Sie ein Polyfill von npm installieren, das alle Vorkommen von <geolocation> transparent und automatisch durch ein benutzerdefiniertes Element <geo-location> (mit Bindestrich) ersetzt, das von der regulären JavaScript Geolocation API unterstützt wird. Wenn der Browser das Element <geolocation> unterstützt, tut das Polyfill nichts. In dieser Polyfill-Demo sehen Sie das Polyfill in Aktion. Der Quell code ist auf GitHub verfügbar.

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

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

Funktionserkennung

Für komplexere Logik können Sie die Unterstützung programmatisch über die Schnittstelle erkennen:

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

Zusammenfassung

Wir sind gespannt, wie Entwickler mit dem neuen <geolocation> HTML-Element leistungsstärkere Szenarien für Standort wiederholungen implementieren werden. Es stellt eine Verlagerung hin zu funktionsspezifischen Elementen dar, die auf die tatsächliche Nutzung des Webs durch Nutzer heute zugeschnitten sind.

Für andere Anwendungsfälle für Berechtigungen können Sie ab Chrome 144 an dem <usermedia> HTML-Element-Ursprung test teilnehmen, das die gleichen ergonomischen Vorteile für Kamera und Mikrofon bietet.

Weitere Informationen

• Das Element <geolocation> im Status der Chrome-Plattform
• Erläuterung des HTML-Elements „Geolocation“
• Demoseite
• Mozilla Standards Position
• WebKit Standards Position

Danksagungen

Dieses Dokument wurde von Andy Paicu, Gilberto Cocchi und Rachel Andrew geprüft.