Mit der Geolocation API können Sie den Standort des Nutzers ermitteln, sofern er seine Einwilligung erteilt hat.
Mit der Geolocation API können Sie mit der Einwilligung des Nutzers seinen Standort ermitteln. Sie können diese Funktion beispielsweise verwenden, um Nutzer zu ihrem Ziel weiterzuleiten und von Nutzern erstellte Inhalte mit Geotags zu versehen, z. B. um den Aufnahmeort eines Fotos zu markieren.
Mit der Geolocation API können Sie auch sehen, wo sich der Nutzer befindet, und ihn bei seinen Bewegungen im Blick behalten – immer mit seiner Einwilligung und nur, solange die Seite geöffnet ist. Das eröffnet viele interessante Anwendungsfälle, z. B. die Einbindung in Backend-Systeme, um eine Bestellung zur Abholung vorzubereiten, wenn sich der Nutzer in der Nähe befindet.
Bei der Verwendung der Geolocation API müssen Sie viele Dinge beachten. In diesem Leitfaden werden die gängigen Anwendungsfälle und Lösungen erläutert.
Zusammenfassung
- Verwenden Sie die Standortbestimmung nur, wenn sie für den Nutzer von Vorteil ist.
- Bitten Sie um Erlaubnis als klare Antwort auf eine Nutzergeste.
- Verwenden Sie die Funktionserkennung, wenn die Standortbestimmung im Browser eines Nutzers nicht unterstützt wird.
- Sie erfahren nicht nur, wie Sie die Standortbestimmung implementieren, sondern auch, wie Sie sie optimal nutzen.
- Testen Sie die Standortbestimmung auf Ihrer Website.
Wann sollte die Standortbestimmung verwendet werden?
- Ermitteln Sie, wo sich der Nutzer am nächsten zu einem bestimmten physischen Standort befindet, um die Nutzererfahrung individuell anzupassen.
- Informationen (z. B. Nachrichten) an den Standort des Nutzers anpassen.
- Die Position eines Nutzers auf einer Karte anzeigen.
- Daten, die in Ihrer App erstellt wurden, mit dem Standort des Nutzers taggen (d. h. ein Bild mit einem Geotag versehen).
Verantwortungsvoll um Erlaubnis bitten
Aktuelle Nutzerstudien haben gezeigt, dass Nutzer Websites misstrauen, auf denen sie einfach aufgefordert werden, ihre Position beim Laden der Seite preiszugeben. Was sind also die Best Practices?
Gehen Sie davon aus, dass die Nutzenden Ihnen ihren Standort nicht mitteilen.
Viele Nutzer möchten ihren Standort nicht preisgeben. Daher müssen Sie einen defensiven Entwicklungsstil verfolgen.
- Beheben Sie alle Fehler aus der Geolocation API, damit Sie Ihre Website an diese Bedingung anpassen können.
- Machen Sie deutlich, dass Sie den Standort benötigen.
- Verwenden Sie bei Bedarf eine Fallback-Lösung.
Fallback verwenden, wenn Standortbestimmung erforderlich ist
Wir empfehlen, für Ihre Website oder Anwendung keinen Zugriff auf den aktuellen Standort des Nutzers erforderlich zu machen. Wenn für Ihre Website oder App jedoch der aktuelle Standort des Nutzers erforderlich ist, gibt es Lösungen von Drittanbietern, mit denen Sie eine ungefähre Angabe dazu erhalten können, wo sich die Person derzeit befindet.
Bei diesen Lösungen wird oft die IP-Adresse des Nutzers geprüft und den physischen Adressen zugeordnet, die in der RIPE-Datenbank registriert sind. Diese Standorte sind oft nicht sehr genau und geben normalerweise die Position des Telekommunikations-Hubs oder Mobilfunkmasts an, der dem Nutzer am nächsten ist. In vielen Fällen sind sie möglicherweise nicht einmal so genau, insbesondere wenn der Nutzer ein VPN oder einen anderen Proxy-Dienst verwendet.
Zugriff auf Standort immer bei einer Nutzergeste anfordern
Nutzer müssen verstehen, warum Sie nach ihrem Standort fragen und welchen Vorteil das für sie hat. Wenn Sie sie direkt auf der Startseite beim Laden der Website abfragen, ist das für die Nutzer nicht optimal.
Geben Sie den Nutzern stattdessen einen klaren Call-to-Action oder einen Hinweis, dass für eine Aktion der Zugriff auf ihren Standort erforderlich ist. Der Nutzer kann dann die Aufforderung des Systems zum Zugriff leichter mit der gerade ausgeführten Aktion verknüpfen.
Sie müssen deutlich darauf hinweisen, dass bei einer Aktion der Standort angefordert wird.
In einer vom Google Ads-Team durchgeführten Studie wurde ein Nutzer aufgefordert, ein Hotelzimmer in Boston für eine bevorstehende Konferenz auf einem bestimmten Hotelstandort zu buchen. Er wurde sofort dazu aufgefordert, seinen GPS-Standort freizugeben, nachdem er auf der Startseite auf den Call-to-Action „Suchen und buchen“ getippt hatte.
In einigen Fällen waren die Nutzer frustriert, weil sie nicht verstanden, warum ihnen Hotels in San Francisco angezeigt wurden, obwohl sie ein Zimmer in Boston buchen wollten.
Es ist besser, wenn Nutzer verstehen, warum Sie nach ihrem Standort fragen. Fügen Sie ein bekanntes Symbol hinzu, das auf allen Geräten verwendet wird, z. B. einen Entfernungsmesser, oder einen expliziten Call-to-Action wie „In meiner Nähe finden“.
Bringe die Nutzer sanft dazu, eine Berechtigung für ihren Standort zu erteilen
Sie haben keinen Zugriff auf die Aktivitäten der Nutzer. Sie wissen genau, wann Nutzer den Zugriff auf ihre Standorte verweigern, aber nicht, wann sie Ihnen Zugriff gewähren. Sie wissen nur, dass Sie Zugriff erhalten haben, wenn Ergebnisse angezeigt werden.
Es hat sich bewährt, Nutzer zum Ausführen einer Aktion anzuregen.
Unsere Empfehlung
- Richten Sie einen Timer ein, der nach kurzer Zeit ausgelöst wird. 5 Sekunden sind ein guter Wert.
- Wenn Sie eine Fehlermeldung erhalten, zeigen Sie sie dem Nutzer an.
- Wenn Sie eine positive Antwort erhalten, deaktivieren Sie den Timer und verarbeiten Sie die Ergebnisse.
- Wenn Sie nach Ablauf der Zeitüberschreitung keine positive Antwort erhalten haben, zeigen Sie dem Nutzer eine Benachrichtigung an.
- Wenn die Antwort später eingeht, die Benachrichtigung aber noch vorhanden ist, entfernen Sie sie vom Bildschirm.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Unterstützte Browser
Die Geolocation API wird inzwischen von den meisten Browsern unterstützt. Es empfiehlt sich jedoch, immer zuerst zu prüfen, ob das möglich ist.
Sie können die Kompatibilität ganz einfach prüfen, indem Sie prüfen, ob das Geostandortobjekt vorhanden ist:
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
Aktuellen Standort des Nutzers ermitteln
Die Geolocation API bietet eine einfache „One-Shot“-Methode, um den Standort des Nutzers abzurufen: getCurrentPosition(). Ein Aufruf dieser Methode liefert asynchron Informationen zum aktuellen Standort des Nutzers.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
Wenn eine Anwendung in dieser Domain zum ersten Mal Berechtigungen anfordert, prüft der Browser in der Regel, ob die Nutzereinwilligung vorliegt. Je nach Browser gibt es möglicherweise auch Voreinstellungen, nach denen Berechtigungsabfragen immer zugelassen oder nicht zugelassen werden sollen. In diesem Fall wird der Bestätigungsprozess umgangen.
Je nachdem, welches Gerät Ihr Browser verwendet, enthält das Positionsobjekt möglicherweise noch viel mehr als nur Breiten- und Längengrad, zum Beispiel eine Höhe oder eine Richtung. Sie können erst sehen, welche zusätzlichen Informationen das Standortsystem verwendet, wenn die Daten zurückgegeben werden.
Standort des Nutzers beobachten
Mit der Geolocation API lässt sich der Standort des Nutzers (mit Einwilligung des Nutzers) mit einem einzigen Aufruf von getCurrentPosition() ermitteln.
Wenn Sie den Standort des Nutzers kontinuierlich überwachen möchten, verwenden Sie die Geolocation API-Methode watchPosition(). Sie funktioniert ähnlich wie getCurrentPosition(), wird jedoch mehrmals als Positionierungssoftware ausgelöst:
- Erhält eine genauere Nutzersperre.
- Bestimmt, dass sich die Position des Nutzers ändert.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Wann die Standortbestimmung verwendet werden sollte, um den Standort des Nutzers zu beobachten
- Sie möchten den Standort des Nutzers genauer ermitteln.
- Ihre Anwendung muss die Benutzeroberfläche anhand neuer Standortinformationen aktualisieren.
- Ihre Anwendung muss die Geschäftslogik aktualisieren, wenn der Nutzer eine bestimmte definierte Zone betritt.
Best Practices für die Verwendung der Standortbestimmung
Speicherplatz freigeben und Akku schonen
Das Überwachen von Änderungen an einer Standortermittlung ist kein kostenloser Vorgang. Während mit Betriebssystemen unter Umständen Plattformfunktionen eingeführt werden, mit denen Anwendungen in das Geo-Subsystem eingebunden werden können, wissen Sie als Webentwickler nicht, welche Unterstützung das Gerät des Nutzers bei der Überwachung des Standorts des Nutzers unterstützt. Und während Sie sich eine Position ansehen, nutzen Sie das Gerät mit einem zusätzlichen Verarbeitungsaufwand.
Wenn Sie die Position des Nutzers nicht mehr erfassen müssen, rufen Sie clearWatch auf, um die Systeme zur Standortbestimmung zu deaktivieren.
Fehler vermeiden
Leider sind nicht alle Standortabfragen erfolgreich. Möglicherweise konnte kein GPS gefunden werden oder der Nutzer hat die Standortsuche plötzlich deaktiviert. Bei einem Fehler wird ein zweites, optionales Argument für getCurrentPosition() aufgerufen, damit du den Nutzer im Rückruf benachrichtigen kannst:
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Weniger Aufwand für die Einrichtung von Hardware für die Standortbestimmung
In vielen Anwendungsfällen benötigen Sie nicht den aktuellsten Standort des Nutzers, sondern nur eine grobe Schätzung.
Mit der optionalen Eigenschaft maximumAge können Sie dem Browser mitteilen, ein kürzlich abgerufenes Standortbestimmungsergebnis zu verwenden. Dies führt nicht nur zu einer schnelleren Rückgabe, wenn der Nutzer die Daten schon einmal angefordert hat, sondern verhindert auch, dass der Browser seine Hardwareschnittstellen für die Standortbestimmung wie die WLAN-Triangulation oder das GPS startet.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Nutzer nicht warten lassen, Zeitlimit festlegen
Sofern Sie kein Zeitlimit festlegen, wird die Anfrage für die aktuelle Position möglicherweise nie zurückgegeben.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Ungefähren Standort gegenüber detailliertem Standort bevorzugen
Wenn Sie das nächstgelegene Geschäft für einen Nutzer finden möchten, ist es unwahrscheinlich, dass Sie eine Genauigkeit von 1 Meter benötigen. Die API ist so konzipiert, dass eine grobe Standortermittlung so schnell wie möglich zurückgegeben wird.
Wenn Sie eine hohe Genauigkeit benötigen, können Sie die Standardeinstellung mit der Option enableHighAccuracy überschreiben. Verwenden Sie diese Option sparsam: Die Auflösung dauert länger und der Akku wird stärker beansprucht.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Standortbestimmung mit Chrome-Entwicklertools emulieren
Nachdem Sie die Standortbestimmung eingerichtet haben, sollten Sie Folgendes tun:
- Testen Sie, wie Ihre App an verschiedenen Standorten funktioniert.
- Prüfen Sie, ob Ihre App mit gradueller Fehlertoleranz funktioniert, wenn die Standortermittlung nicht verfügbar ist.
Sie können beides in den Chrome-Entwicklertools tun.
- Öffnen Sie die Chrome-Entwicklertools.
- Drücken Sie die Esc-Taste, um den Konsolenbereich zu öffnen.
- Menü der Console-Seitenleiste öffnen
- Klicken Sie auf die Option Sensoren, um den Tab „Sensoren“ aufzurufen.
Hier können Sie den Standort auf eine voreingestellte Großstadt überschreiben, einen benutzerdefinierten Standort eingeben oder die Standortermittlung deaktivieren, indem Sie die Überschreibung auf Standort nicht verfügbar festlegen.