Standortbestimmung / GeoLocation mit JavaScript / HTML5

Auf Smartphones findet die GeoLocation Funktion bereits rege Anwendung z.B. in Maps Applikationen oder Twitter um Tweets mit Location Strings zu versehen. Diese GeoLocation Funktion findet mit HTML5 nun auch Einzug auf die Desktop Browser. Denn im neuen HTML5 Standard wurde die JavaScript API um eine navigator.geolocation Klasse erweitert. GeoLocation berechnet die aktuelle Position aufgrund von GPS-Daten, insofern diese zur Verfügung stehen. Ist dies nicht der Fall, so wird versucht anhand des Wi-Fi SNetzes und der IP-Adresse den aktuellen Standort zu bestimmen.

Die GeoLocation Daten lassen sich via JavaScript relativ einfach abfragen, es gilt allerdings zu beachten, dass jeder Nutzer der Abfrage seiner Standortbezogenen Daten erst zustimmen muss. Dies geschieht in Form eines einfachen Dialogs, der vom Browser aus gesteuert wird. Es sollte also immer sichergestellt sein, dass die Webseite oder das Script nicht zwingend auf GeoLocation Daten setzt, denn der Zugang zu diesen Daten kann auch durchaus vom Nutzer verweigert werden.

Grundlage für unser Script ist erst einmal eine Abfrage die checkt ob uns überhaupt eine navigator.geolocation Klasse zur Verfügung steht, dass würde dann so aussehen:

if (navigator.geolocation) {
  alert("GeoLocation API ist verfügbar!");
} else {
  alert("GeoLocation API ist NICHT verfügbar!");
}

Wenn die GeoLocation Klasse verfügbar ist, lassen sich damit die Längen- und Breitengrade darüber abfragen, damit lässt sich dann z.B. der Standort auf Google Maps darstellen. Ein vollständiges Script würde dann wie folgt aussehen:

function success(position) {
	lat = position.coords.latitude;
  	long = position.coords.longitude;
  	document.write('latitude: '+lat+'<br>longitude: '+long);
}
 
function error(msg) {
	console.log(typeof msg == 'string' ? msg : "error");
}
 
if (navigator.geolocation) {
         // getCurrentPosition ruft die Funktion success auf und übermittelt die Position Werte
         // error wird ausgeführt wenn es einen Fehler beim ermitteln der Position gibt
	navigator.geolocation.getCurrentPosition(success, error);
} else {
alert("GeoLocation API ist NICHT verfügbar!");
}

Dieses Script findet ihr als Demo unter folgender URL: https://www.webdesign-podcast.de/wp-content/demos/geolocation.html

Diese Funktion ist in allen modernen Browsern verfügbar, die auch HTML unterstützen, sowohl Desktop als auch mobile Browser.

Mit diesem Script werden einfach die latitude und longitude Daten in das HTML-Dokument geschrieben. Kopiert diese einfach in Google Maps und ihr seht euren aktuellen Standort. Dieser Prozess lässt sich mittels Maps API natürlich auch automatisieren.