JavaScript / DHTML

Standortbestimmung / GeoLocation mit JavaScript / HTML5

WordPress Entwickler und Webdesigner

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:

Anzeige:




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.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

3 Antworten zu “Standortbestimmung / GeoLocation mit JavaScript / HTML5”

  1. Klasse Vorarbeit, danke! Jetzt versuche ich die Koordinaten in Straße + Stadt umzuwandeln und in eine Variable zu schreiben, mal sehen ob das klappt 😀

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.