Start · Sprachen · JavaScript · Referenz · Navigator.geolocation

Navigator.geolocation

Eigenschaft

Die schreibgeschützte Eigenschaft <code>navigator.geolocation</code> liefert ein <code>Geolocation</code>-Objekt, über das Webseiten den Standort des Geräts abfragen können.

seit JavaScript Baseline: alle Browser (nur in sicheren Kontexten/ Kategorie: webapi

Signatur

get Navigator.geolocation

Beschreibung

navigator.geolocation ist der Einstiegspunkt in die Geolocation-API. Die Eigenschaft gibt ein Geolocation-Objekt zurück, das die Methoden getCurrentPosition(), watchPosition() und clearWatch() bereitstellt. Damit lassen sich Breiten- und Längengrad, Genauigkeit, Höhe, Richtung und Geschwindigkeit des Geräts ermitteln.

Typische Einsatzfälle sind Kartenanwendungen, „Filialen in meiner Nähe“, Wetterdienste, Lauf- oder Fahrtracking sowie das Vorausfüllen von Adressformularen. Der Standort kann aus GPS, WLAN-Netzen, Mobilfunkzellen oder der IP-Adresse stammen – die Genauigkeit schwankt daher stark.

Wichtig: Die API ist nur in sicheren Kontexten (HTTPS, localhost) verfügbar. Beim ersten Zugriff fragt der Browser den Nutzer um Erlaubnis. Alle Abfragen laufen asynchron über Callbacks; Fehler (Ablehnung, Zeitüberschreitung, kein Signal) werden über einen Fehler-Callback mit einem GeolocationPositionError gemeldet.

Da die Eigenschaft schreibgeschützt ist, besitzt sie keine Parameter. Vor der Nutzung sollte mit 'geolocation' in navigator geprüft werden, ob die API vorhanden ist.

Rückgabewert

Typ
Geolocation
Beschreibung
Ein Geolocation-Objekt mit den Methoden getCurrentPosition(), watchPosition() und clearWatch(). Bei jedem Zugriff wird dasselbe Objekt geliefert.

Beispiele

Aktuellen Standort einmalig abfragen

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(
    (pos) => {
      const { latitude, longitude, accuracy } = pos.coords;
      console.log(`Position: ${latitude.toFixed(4)}, ${longitude.toFixed(4)} (±${Math.round(accuracy)} m)`);
    },
    (err) => {
      console.error(`Fehler ${err.code}: ${err.message}`);
    },
    { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
  );
} else {
  console.warn('Geolocation wird nicht unterstützt.');
}
Position: 52.5200, 13.4050 (±25 m)

Callback-API in ein Promise verpacken (async/await)

const getPosition = (options = {}) =>
  new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error('Geolocation nicht verfügbar'));
      return;
    }
    navigator.geolocation.getCurrentPosition(resolve, reject, options);
  });

const zeigeWetter = async () => {
  try {
    const { coords } = await getPosition({ timeout: 8000 });
    const url = `https://api.open-meteo.com/v1/forecast?latitude=${coords.latitude}&longitude=${coords.longitude}&current_weather=true`;
    const data = await (await fetch(url)).json();
    console.log(`Aktuell: ${data.current_weather.temperature} °C`);
  } catch (err) {
    console.error('Standort nicht ermittelbar:', err.message);
  }
};

zeigeWetter();
Aktuell: 18.3 °C

Bewegung verfolgen und Tracking beenden

const punkte = [];

const watchId = navigator.geolocation.watchPosition(
  ({ coords, timestamp }) => {
    punkte.push({ lat: coords.latitude, lng: coords.longitude, timestamp });
    console.log(`Punkt ${punkte.length}: ${coords.latitude}, ${coords.longitude}`);
  },
  (err) => console.error(err.message),
  { enableHighAccuracy: true }
);

// Tracking per Button stoppen
document.querySelector('#stop').addEventListener('click', () => {
  navigator.geolocation.clearWatch(watchId);
  console.log(`Tracking beendet – ${punkte.length} Punkte gespeichert.`);
});
Punkt 1: 52.52, 13.405 Tracking beendet – 1 Punkte gespeichert.

Berechtigungsstatus vorab prüfen

const status = await navigator.permissions.query({ name: 'geolocation' });
console.log(`Berechtigung: ${status.state}`); // 'granted' | 'denied' | 'prompt'

status.addEventListener('change', () => {
  console.log(`Neuer Status: ${status.state}`);
});
Berechtigung: prompt

// Wichtig · Fallstricke

  • Nur sichere Kontexte: Auf HTTP-Seiten (außer localhost) schlagen Abfragen fehl bzw. die API ist nicht verfügbar.
  • Nutzerzustimmung: Die Abfrage löst einen Berechtigungsdialog aus. Am besten nur nach einer Nutzeraktion (z. B. Klick) anfragen, nicht direkt beim Seitenaufruf – sonst lehnen Nutzer eher ab und manche Browser unterdrücken den Dialog.
  • Fehlercodes: 1 = PERMISSION_DENIED, 2 = POSITION_UNAVAILABLE, 3 = TIMEOUT. Ohne timeout-Option kann eine Abfrage unbegrenzt warten.
  • Iframes: In fremden Iframes muss der Zugriff per allow="geolocation" (Permissions Policy) freigegeben werden.
  • Akku und Performance: enableHighAccuracy: true und watchPosition() verbrauchen viel Energie. Nicht mehr benötigte Watches immer mit clearWatch() beenden.
  • Datenschutz: Standortdaten sind personenbezogen (DSGVO). Nur so genau und so lange wie nötig erheben und speichern.
  • Die Genauigkeit variiert stark (Desktop oft nur IP-/WLAN-basiert, mehrere Kilometer ungenau) – immer coords.accuracy auswerten.