HTML5 Geolocation API: Standort in Google Maps anzeigen

Nachdem ich vor einigen Tagen die neuen HTML5 Formulare vorgestellt habe, soll es heute um ein weiteres Spielzeug aus der großen bunten HTML5-Spielzeugkiste gehen. Gegenstand unserer Begierde ist die neue Javascript Gelocation API, mit der sich ziemlich exakt der Standort eines Besuchers ermitteln lässt. Dies funktioniert bereits in fast allen modernen Browsern und lässt sich somit bereits heute optional nutzen.

Im heutigen Artikel soll es im ersten Schritt darum gehen, die Position des Besuchers in Form von Längen- und Breitengrad zu ermitteln und diese Informationen auf der Webseite auszugeben. Im zweiten Schritt wollen wir per Google Maps API eine Karte einbetten, welche mit Hilfe eines Symbols unseren Standort kenntlich macht. Hier findet ihr eine Demo des Endergebnisses. Bevor es an den Quellcode geht, vorweg noch etwas theoretisches…

Wie funktioniert die Geolocation API?

Die Geolocation API ist eine HTML5 Javascript-Schnittstelle mit offiziellen W3C-Spezifikationen. Dabei werden vom Browser mehrere Methoden genutzt, um den besten Standort des Nutzers zu ermitteln. Das wären zum Beispiel:

  • GPS-Sender
  • WLAN-Netzwerke
  • Funk-Signale (Handynetz)
  • IP-Adresse
  • Vom Benutzer definierter Standort

Natürlich ergibt sich daraus, dass die Positionsbestimmung am heimischen PC nicht exakt sein muss. Nur die wenigsten Desktop-Rechner werden über ein 3G-Modem, geschweige denn über einen eigenen GPS-Sender verfügen, weshalb die Geolocation API auf andere Daten zurückgreifen muss. In einigen Desktop-Browsern ist es beispielsweise möglich, den aktuellen Standort (dieser wird sich ja nur selten ändern) per Hand einzutragen. Ist dies nicht der Fall, steht die IP-Adresse eine mehr oder weniger solide Fallback-Lösung dar. Je nach Provider und städtischer DSL-Infrastruktur kann die Bestimmung der Position nach IP-Adresse zwischen 1km und 100km variieren.

Richtig spannend wird die Geolocation API natürlich erst mit mobilen Geräten wie Smartphones oder Tablets, die sich immer größerer Beliebtheit erfreuen. Hier ist in fast alle Geräten ein GPS-Sender oder 3G-Modem verbaut und die Position des Nutzers lässt sich im Idealfall auf den Meter genau bestimmen.

Und wo bleibt der Datenschutz?

Die Sicherheitsbestimmungen des W3C zum Thema Geolocation API sehen ausdrücklich vor, dass der Nutzer gefragt werden muss, bevor der Browser seine Position ermitteln darf:

User agents must not send location information to Web sites without the express permission of the user. User agents must acquire permission through a user interface, unless they have prearranged trust relationships with users, as described below.

Wer sich also schon gefreut hat, in Zukunft exakte Statistiken über die Herkunft seiner Webseiten-Besucher führen zu können, den muss ich leider enttäuschen. Ohne die explizite Zustimmung des Besuchers gibt es keine Positionsdaten. In den Spezifikationen ist von einem user interface die Rede, über dass der Nutzer nach seiner Zustimmung gefragt wird. In den meisten Desktop-Browsern ist dies eine am oberen Bildschirmrand erscheinende Leiste. Browser von Smartphones zeigen hingegen häufig ein Popup, welches der Nutzer nicht übersehen kann und zu einer Eingabe (Zustimmung / Ablehnung) gezwungen ist.

Geolocation-Sicherheitsfrage im Chrome

Jedoch sollte man beachten, dass Browser Zustimmungen für Webseiten speichern können. Hier unterscheidet sich das Verhalten von Browser zu Browser aber sehr stark, weshalb man sich als Nutzer vorher informieren sollte, wo man einmal getätigte Zustimmungen bei seiner Software rückgängig machen kann.

Kann ich die Geolocation API heute bereits nutzen?

Ich bin der Meinung, dass man die Geolocation API bereits heute vollwertig in einer Webapp nutzen kann. Handelt es sich um eine klassische Webseite, sollte man die neue HTML5 API jedoch nur optional und abwärts kompatibel anzeigen.

Folgende Browser unterstützen die HTML5 Geolocation API:

  • Google Chrome
  • Mozilla Firefox 3.5+
  • Opera 10.6+
  • Safari
  • Internet Explorer 9

Als kleine Anmerkung ist zu sagen, dass die Positionsbestimmung unter Safari mir leider eine Fehlermeldung zurücklieferte. Dies kann aber auch ein Flüchtigkeitsfehler meinerseits gewesen sein.

Noch spannender als die Unterstützung der Desktop-Browser ist die Frage nach den Browsern von mobilen Betriebssystemen:

  • Android (seit Version 2.0)
  • iOS (seit OS 3.0)
  • Windows Phone 7
  • Blackberry OS 6
  • Opera Mobile 10.1+

Auch wenn es bei der ein oder anderen Plattformen noch zu vereinzelten Bugs kommt, lässt es sich nicht leugnen, dass die Geolocation API bereits bei den mobilen Browsern angekommen ist und eine solide Implementierung und Verbreitung vorweisen kann. Alleine bei Android-Geräten liegt die Verbreitung der Version 2.0 oder höher bei über 95%; unterstrichen wird diese Tatsache von der Zahl, dass weltweit jeden Tag über 700.000 neue Android-Smartphones oder -Tablets aktiviert werden.

Schritt 1: Position per Geolocation API ausgeben

Wer sich schon einmal mit Google Maps, Routenplanung oder Distanzberechnung auseinandergesetzt hat, wird die englischen Begriffe Latitude und Longitude mit Sicherheit kennen. Im deutschen stehen diese für Breiten- und Längengrad und bilden im heutigen Alltag einen wichtigen Bestandteil jeglicher Navigation und Positionsbestimmungen. Durch etliche Nachkommastellen lässt sich somit ein Ort auf unserer Erde exakt definieren.

Neben einigen anderen Attributen wie Höhe, Geschwindigkeit und Richtung – um die es aber heute auf Grund mäßiger Implementierung nicht gehen soll – stellen Latitude und Longitude die wichtigste Ausgabeinformation der Gelocation API dar.

Das folgende HTML5-Dokument beinhaltet einen div-Container, in den wir per Javascript (bei Zustimmung des Nutzers) die Koordinaten seiner Position hinterlegen:

Der Quelltext im Detail betrachtet:

  • Zeile 9 – 11
    Hier erstellen wir einen div-Container mit der ID pos, welcher nach Abruf der Position per Geolocation API entweder eine Fehlermeldung oder im Erfolgsfall die Latitude und Longitude Koordinaten des Nutzers ausgibt.
  • Zeile 14
    Wir nutzen die Funktion getCurrentPosition() des geolocation-Objekts, welche in den meisten Fällen zwei Callback-Funktionen als Parameter erwartet. Die erste Callback-Funktion wird im Erfolgsfall aufgerufen und beinhaltet das position-Objekt, welches wiederum die Koordinaten-Informationen enthält. Der zweite Callback wird im Fehlerfall aufgerufen und beinhaltet ein Javascript-Objekt mit Informationen zum Fehler, welches wir uns später nochmal anschauen werden.
  • Zeile 15
    Wie gesagt liefert der Erfolgs-Callback das Objekt position zurück, welches wiederum zwei Kinder hat. Zum einen ist das timestamp (position.timestamp); der Zeitpunkt zu dem die Position ermittelt wurde – zum anderen coords (position.coords); wiederum ein eigenes Objekt in dem die Positionsinformationen versteckt sind.
    Das Obejkt position.coords beinhaltet die Variablen latitude (Breitengrad), longitude (Längengrad), altitude (Höhe), accuracy (Genauigkeit), altitudeAccuracy (Genauigkeit Höhe), heading (Richtung), speed (Geschwindigkeit).
    Objekt unserer Begierde sind die beiden Variablen latitude und longitude, welche wir per document.getElementById() in den Container mit der ID pos schreiben.
  • Zeile 17
    Im Fehler-Callback nehmen wir keine explizite Analyse des aufgetretenen Fehlerfalls vor und geben eine allgemein gültige Fehlermeldung aus.

Im Ergebnis könnte die Ausgabe nach Zustimmung des Nutzers dann wie folgt aussehen:

Ausgabe im Firefox

Schritt 2: Position auslesen und auf Google Maps Karte ausgeben

Zugegeben, mit den Latitude und Longitude können vielleicht Hardcore-Geographen etwas anfangen, Otto-Normal-Webseite-Besucher jedoch nicht. Deshalb wollen wir die HTML5 Geolocation API mit der Google Maps API paaren und eine Karte samt Symbol auf unserer aktuellen Position ausgeben.

Dazu müssen wir unser obiges HTML5-Dokument wie folgt abändern:

Der neue Quellcode im Detail:

  • Zeile 7
    Wir betten die neueste Version der Google Maps Javascript-API ein.
  • Zeile 11
    Damit der Container pos später die Google Maps Karte anzeigen kann, benötigt er eine Breite und Höhe.
  • Zeile 33
    Anstatt die Koordinaten direkt auszugeben, übergeben wir das coords-Objekt nach Ermittlung der Position an die Funktion initialize.
  • Zeile 16
    Wir öffnen die Javascript-Funktion initialize(), welche als Parameter das coords-Objekt erwartet.
  • Zeile 17
    Die Google Maps API V3 arbeitet mit Koordinaten-Objekten zur Positionsbestimmung. Ein eben solches erstellen wir in dieser Zeile mit den im coords-Objekt übergebenen Breiten- und Längengraden. Zur Weiterverarbeitung speichern wir das Objekt in der Variable latlng.
  • Zeile 18 – 22
    Und noch ein Objekt benötigen wir, um unsere Karte zu initialisieren. Innerhalb von myOptions definieren wir die Zoomstufe der Karte (zoom), den Mittelpunkt der Karte (center) und den Karten-Typ (mapTypeId).
  • Zeile 23
    In dieser Zeile laden wir schließlich die Google Maps Karte in den Container mit der ID pos und übergeben die eben definierten Einstellungen aus dem myOptions-Objekt. Anschließend speichern wir das Ergebnis zur Weiterverarbeitung in der Variable map.
  • Zeile 25-30
    Zwar haben wir die Karte bereits auf unsere Position zentriert, aber da wir es genau wissen möchten, benötigen wir noch ein Symbol, welches uns die exakte Position auf der Karte anzeigen soll. Für solche Markierungen stellt die Google Maps API die Marker()-Funktion zur Verfügung. Diese erwartet als Parameter ein Objekt. In unserem Beispiel definieren wir erneut über unsere latlng-Variable die Position der Markierung (position), die Karte auf die der Marker überhaupt gesetzt werden soll (map) und den Titel (title), welcher beim Überfahren des Symbols mit der Maus angezeigt wird.

Das war bereits alles. Nach Bestimmung der Position (kann je nach Browser und Art der Positionsermittlung einige Sekunden dauern) sollte eine Google Maps Karte angezeigt werden, die in etwa wie die folgende aussieht:

Ergebnis im Desktop-Browser Chrome

Zur Information: Ich sitze gerade nicht in Löhne sondern Espelkamp. Im Desktop-Browser findet wie am Anfang des Artikels besprochen höchstwahrscheinlich eine Ermittlung der Position an Hand der IP-Adresse statt. Das Ergebnis weißt also eine Ungenauigkeit von ca. 15 – 20 Kilometern auf. Jedoch kann bereits in wenigen Stunden wieder eine andere Position ermittelt worden sein; in meinen Tests variierte die Differenz zwischen 1 – 50 Kilometern.

Wenn ich das HTML5-Dokument mit meinem Smartphone aufrufe und die Freigabe zur Positionsermittlung erteile, erhalte ich natürlich ein Ergebnis, welches bis auf wenige Meter exakt meine Position bestimmt. In diese Fall berücksichtigt der Browser meines Android-Smartphones nicht die IP-Adresse, sondern greift direkt auf den GPS-Sender zu.

Einsatzgebiete? Wo fange ich an…

Ich persönlich finde die HTML5 Geolocation API großartig und freue mich immer, wenn ich Sie in Kundenprojekten optional verwenden darf. Mit korrekter Fallback-Implementierung sind die Einsatzgebiete nämlich schier unendlich!

Vielleicht konnte ich euch mit diesem Artikel ja auf die ein oder andere Idee bringen – falls dies so ist und ihr nicht die nächste One-Million-Dollar-Page plant, würde ich mich freuen von euch zu hören, wo ihr euch einen Einsatz der Geolocation API vorstellen könntet :)


Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0