Standortbestimmung: Nutzer- oder Gerätepositionen auf Karten anzeigen

Übersicht

In dieser Anleitung erfahren Sie, wie Sie den geografischen Standort eines Nutzers oder eines Geräts mithilfe der HTML5-Standortbestimmung Ihres Browsers und der Maps JavaScript API auf einer Google Maps-Karte darstellen können. Hinweis: Der geografische Standort von Nutzern wird nur angezeigt, wenn auf ihrem Gerät die Standortfreigabe aktiviert ist.

Unten sehen Sie eine Karte, auf der Ihr aktueller Standort ermittelt werden kann.

Im folgenden Beispiel wird der gesamte Code angezeigt, den Sie zum Erstellen dieser Karte benötigen.

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);

  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position: GeolocationPosition) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter()!);
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter()!);
    }
  });
}

function handleLocationError(
  browserHasGeolocation: boolean,
  infoWindow: google.maps.InfoWindow,
  pos: google.maps.LatLng
) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation."
  );
  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map, infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation."
  );
  infoWindow.open(map);
}

window.initMap = initMap;
index.js

Was ist die Standortbestimmung?

Der Begriff „Standortbestimmung“ bezieht sich auf die Ermittlung des geografischen Standorts eines Nutzers oder eines Geräts über eine Vielzahl von Datenerhebungsmechanismen. Die meisten Dienste nutzen Netzwerkroutingadressen oder interne GPS-Geräte zur Bestimmung des Standorts. Die Geolocation API ist gerätespezifisch. Das bedeutet, dass Browser oder Geräte die Standortbestimmung unterstützen müssen, damit sie über Webanwendungen genutzt werden kann.

W3C-Standard zur Standortbestimmung

Anwendungen, die den Standort ermitteln sollen, müssen den W3C-Standard zur Standortbestimmung unterstützen. Im Beispielcode oben wird der Standort des Nutzers über das W3C-Attribut navigator.geolocation bestimmt.

Einige Browser verwenden IP-Adressen, um den Standort eines Nutzers zu ermitteln. Es handelt sich dabei jedoch möglicherweise nur um eine grobe Schätzung des Nutzerstandorts. Der W3C-Ansatz ist der unkomplizierteste und am weitesten verbreitete Ansatz. Daher sollte er gegenüber anderen Verfahren zur Standortbestimmung priorisiert werden.