Signatur
Beschreibung
HTMLGeolocationElement ist die DOM-Schnittstelle des Elements <geolocation>. Das Element gehört zu den seiteneingebetteten Berechtigungs-Steuerelementen, die aus dem früheren <permission>-Vorschlag hervorgegangen sind. Statt beim Laden der Seite per navigator.geolocation.getCurrentPosition() ungefragt einen Berechtigungsdialog zu öffnen, zeigt die Seite einen Button an, dessen Beschriftung und Symbol der Browser vorgibt. Klickt der Nutzer darauf, fragt der Browser nach der Berechtigung, ermittelt den Standort und liefert das Ergebnis direkt am Element.
Weil der Klick eindeutig vom Nutzer ausgeht, kann der Browser die Anfrage besser einordnen. Auch eine zuvor abgelehnte Berechtigung lässt sich so erneut anfragen. Über das Interface erreichst du unter anderem:
position: das zuletzt ermittelteGeolocationPosition-Objekt odernullerror: einGeolocationPositionErrorodernullautolocate: spiegelt das gleichnamige Attribut; ist die Berechtigung schon erteilt, wird der Standort ohne Klick ermitteltwatch: spiegelt das Attributwatch; der Standort wird dann fortlaufend aktualisiert, ähnlich wie beiwatchPosition()permissionStatusundinitialPermissionStatus: aktueller bzw. anfänglicher Berechtigungsstatus ("granted","denied","prompt")isValidundinvalidReason: ob das Element gerade benutzbar ist und, falls nicht, warum
Wichtige Ereignisse sind location (eine Position oder ein Fehler liegt vor), promptaction und promptdismiss (der Nutzer hat im Dialog gehandelt oder ihn geschlossen) sowie validationstatuschange (isValid hat sich geändert). Nutze das Element überall dort, wo der Standort erst auf eine Nutzeraktion hin gebraucht wird, etwa bei „Filialen in meiner Nähe“ oder beim Ausfüllen einer Lieferadresse.
Rückgabewert
<geolocation> im HTML-Markup oder durch document.createElement("geolocation").Beispiele
Element erzeugen und auf den Standort reagieren
// Kurzfassung als HTML: <geolocation id="geo"></geolocation>
const geo = document.createElement("geolocation");
document.querySelector("#standort-bereich").append(geo);
geo.addEventListener("location", () => {
if (geo.position) {
const { latitude, longitude, accuracy } = geo.position.coords;
console.log(`Standort: ${latitude.toFixed(4)}, ${longitude.toFixed(4)} (±${Math.round(accuracy)} m)`);
} else if (geo.error) {
console.warn(`Fehler ${geo.error.code}: ${geo.error.message}`);
}
});Funktionserkennung mit Rückfall auf navigator.geolocation
const zeigeFilialen = ({ coords }) =>
console.log("Suche Filialen nahe", coords.latitude, coords.longitude);
const container = document.querySelector("#filialsuche");
if ("HTMLGeolocationElement" in window) {
const geo = document.createElement("geolocation");
geo.autolocate = true; // ohne Klick, falls die Berechtigung schon erteilt ist
geo.addEventListener("location", () => geo.position && zeigeFilialen(geo.position));
container.append(geo);
} else {
// Klassischer Weg: eigener Button und Geolocation API
const button = document.createElement("button");
button.textContent = "Meinen Standort verwenden";
button.addEventListener("click", () =>
navigator.geolocation.getCurrentPosition(zeigeFilialen, (err) => console.warn(err.message))
);
container.append(button);
}Laufende Verfolgung und Berechtigungsereignisse
const geo = document.createElement("geolocation");
geo.watch = true; // Position laufend aktualisieren
document.body.append(geo);
console.log("Anfangsstatus:", geo.initialPermissionStatus);
geo.addEventListener("promptdismiss", () => {
console.log("Dialog geschlossen, Status:", geo.permissionStatus);
});
geo.addEventListener("location", () => {
if (geo.position) console.log("Neue Position um", new Date(geo.position.timestamp).toLocaleTimeString());
});
geo.addEventListener("validationstatuschange", () => {
if (!geo.isValid) console.warn("Element derzeit nicht benutzbar:", geo.invalidReason);
});// Wichtig · Fallstricke
Experimentell: Derzeit unterstützen nur Chromium-basierte Browser (ab Chrome 144) das Element. Firefox und Safari kennen es nicht; dort ist <geolocation> ein unbekanntes Element vom Typ HTMLUnknownElement. Prüfe die Unterstützung daher immer mit "HTMLGeolocationElement" in window und biete einen Rückfall über navigator.geolocation an. Eigenschafts- und Ereignisnamen können sich noch ändern.
Gestaltung ist eingeschränkt: Damit niemand Nutzer zu einem Klick verleiten kann, erzwingt der Browser Regeln für CSS. Dazu gehören ausreichender Kontrast, eine Mindest- und Höchstgröße, keine Transparenz, keine Verzerrung durch transform und kein Verdecken durch andere Elemente. Wird eine Regel verletzt oder ist das Element gerade erst eingeblendet worden, wird isValid zu false, Klicks werden ignoriert und invalidReason nennt den Grund. Den Beschriftungstext kannst du nicht selbst festlegen.
Sicherheit und Kontext: Wie die Geolocation API funktioniert das Element nur in sicheren Kontexten (HTTPS). In iframes muss die Berechtigungsrichtlinie das erlauben, z. B. mit allow="geolocation". Ein Klick per Skript mit click() löst keine Berechtigungsanfrage aus.
Randfälle: position und error sind vor dem ersten location-Ereignis null. Prüfe im Handler beide Werte. Bei watch kommen fortlaufend Ereignisse an; das kann Akku kosten. Entferne das Element, wenn du keine Aktualisierungen mehr brauchst.