Kategorien
Webdesign

Standortbasierende Dienste mit HTML5-Geolocation und Google Places

Google Places werden die meisten Webentwickler bereits aus SEO-taktischen Gründen kennen. Nicht jedem bewusst sein könnte der Umstand, dass man Google Places zu weit mehr als zur Eintragung seines Unternehmens nutzen kann. Im folgenden kleinen How-To möchte ich zeigen, wie nützlich Google Places in Verbindung mit HTML5-Geolocation ist. Dienste wie Foursquare oder Facebook Places nutzen übrigens einen, unserem Beispiel ähnlichen Ansatz.

Das folgende Szenario wollen wir entwickeln. Unsere Seite soll herausfinden, welche Unternehmen welcher Branchen sich in der Nähe des aktuellen Standorts des Nutzers befinden. Zum Beispiel könnte man alle Bars der Branche Gastronomie anzeigen lassen wollen. Zu diesem Zweck eignet sich die Geolocation-API der HTML5-Spezifikation, die das Auslesen des Standorts des Nutzers zulässt.

Bevor wir tiefer in die Materie einsteigen, sollten Sie sich zunächst einen API-Key von Google besorgen, den sie unter diesem Link unter Verwendung eines Google-Accounts erhalten.

Zu Beginn sollte man versuchen, die aktuellen Standortdaten des Nutzers zu erhalten. Dazu verwendet man das navigator-Objekt, welches verschiedene Informationen über den Nutzer enthält, unter anderem die Positionsdaten. Man erstellt also eine Funktion namens get_location() und ruft darin navigator.geolocation.getCurrentPosition(get_places, errors_action); auf.

function get_location() {
   navigator.geolocation.getCurrentPosition(get_places, catch_errors);
}

In der Funktion getCurrentPosition ist es nötig, mindestens zwei Parameter anzugeben. Diese stehen jeweils für Funktionen, die als Callback für getCurrentPosition dienen. Der erste Parameter wird bei einem erfolgreichen Ermitteln der aktuellen Position aufgerufen, der zweite bei einem entsprechenden Fehler. Da es meiner Ansicht nach eine gute Praxis ist, zuerst mögliche Fehler abzufangen, sollte man dies auch wirklich anfangs tun.

Geolocation Fehler abfangen

Abfangen sollte man dabei primär PERMISSION_DENIED (Nutzer weist Anfrage auf Erlaubnis der Standort-Mitteilung ab), POSITION_UNAVAILABLE (Es konnte aus technischen Gründen kein Standort ermittelt werden) und TIMEOUT (Die Anfrage benötigte zu viel Zeit). In unserem Beispiel geben wir, um das Ganze einfach zu halten, die Fehlermeldung lediglich über ein alert-Fenster aus. Dazu erstellt man eine Funktion mit dem Bezeichner catch_errors():

function catch_errors(error) {
    switch(error.code){
         case error.PERMISSION_DENIED: alert("Der Nutzer moechte keine Daten teilen.");break;
         case error.POSITION_UNAVAILABLE: alert("Die Geodaten sind nicht erreichbar.");break;
         case error.TIMEOUT: alert("Timeout erhalten");break;
         default: alert ("Unbekannter Error");break;
    }
}

Google Places API nutzen

Die eigentliche Logik soll in der Funktion get_places entwickelt werden. Dazu werden die aktuellen Standortdaten aus der Geolocation API verwendet. Folgende Informationen stellt die API zur Verfügung, nachdem der Nutzer dies genehmigt hat:

  • Latitude & Longitude – Geographische Koordinaten
  • Altitude – Höhe des Standortes in Metern
  • Accuracy – Genauigkeit der Koordinaten-Angaben in Metern
  • AltitudeAccuracy – Genauigkeit der Höhenangabe in Metern
  • Heading – Bewegungsrichtung des Nutzers in Grad im Uhrzeigersinn
  • Speed – Geschwindigkeit in m/s

Ziemlich viele Daten, die der Nutzer dem Entwickler offen legt, verlässlich und nützlich sind sie dabei nicht immer. Um auf die Daten Zugriff zu nehmen, erstellt man anfangs wieder einen Funktionsrumpf:

get_places(position){

}

Im Funktionsrumpf befindet sich nun bereits der Parameter position und position enthält die nötigen Informationen. Für die Google Places-API braucht man im Grunde nur Latitude und Longitude, sowie die Genauigkeit. Also erweitern wir unsere Funktion get_places um das Übergeben der Daten an folgende Variablen:

var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var accuracy = position.coords.accuracy;

Als Nächstes muss die Places API-URL vorbereitet werden:

var places_url = "https://maps.googleapis.com/maps/api/place/search/json?location="+ latitude +","+ longitude +"&radius="+ accuracy +"&types=food&sensor=true&key=EuerEigenerKEY";

In die URL sind verschiedene Parameter einzupflegen. Für den Parameter location werden Breiten- und Längengrad, geteilt durch ein Komma angegeben. In Radius muss der Umkreis der Places-Ermittlung angegeben werden. Dieser könnte prinzipiell auch individuell übergeben werden, Google selber empfiehlt aber in der Places-Dokumentation die Verwendung der Genauigkeit der Ortsangabe. Unter Types kann der Typ (also Gastronomie etc.) der zurück gegebenen Informationen eingegrenzt werden. Unter Sensor stellt man mittels true oder false ein, ob die Informationen vom Client manuell oder mittels eines GPS-ähnlichen Moduls angegeben wurden. In den Parameter Key gehört der weiter oben generierte API-Key. Es gibt weitere Parameter, über die die Places Dokumentation Auskunft erteilt.

Das Ganze an Google zu senden, um eine Antwort zu erhalten, ist im Moment wegen fehlender JSONP-Unterstützung nur schwer möglich, Alternativen finden sich hier. Der beste Weg ist die direkte Implementation in die Anwendungslogik, anstatt über JavaScript zu gehen.
Gastronomie in Rostock mit Hilfe von Google Places finden
Gastronomie in Rostock mit Hilfe von Google Places finden

Google Places antwortet in JSON

Die Verwendung von XML ist ebenfalls zulässig. Ich zeige hier am Beispiel die Informationen, die man in JSON zurück erhält.

Zuerst erfolgt die Nennung der Quelle der Angaben. In Deutschland sind das oft die „Gelben Seiten“:

"html_attributions" : [
      "Einträge aus \u003ca href=\"http://www.gelbeseiten.de/\"\u003eGelbeSeiten®Verlagen\u003c/a\u003e"
   ]

Danach bekommt man in results die eigentlichen Ergebnisse:

{
"geometry" : {
"location" : {
"lat" : 54.086360,
"lng" : 12.0959770
}
},
"icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/stadium-71.png",
"id" : "271b187642f633794399fcdac286c2a9b12ab3fc",
"name" : "DKB Arena",
"rating" : 5.0,
"reference" : "CnRoAAAAwWS51nGZjagN0S...",
"types" : [ "stadium", "establishment" ],
"vicinity" : "Kopernikusstraße 17, Rostock"
},

Dabei gibt geometry den exakten Standort des Ergebnisses aus, icon zeigt ein zum Ergebnis passendes Bild, id einen eindeutigen Bezeichner, reference kann für detailliertere Informationen über das Ergebnis genutzt werden, vicinity enthält einen umgebenden bekannten Standort und types die Kategorie des Ergebnisses.

Wie nutze ich Google Places effektiv ?

Sinn ergibt dieser Einsatz von Google Places zum Beispiel, wenn man ein Unternehmen mit mehreren Filialen betreibt und dem Nutzer automatisch alle Filialen und spezielle Angebote in seinem Umkreis anzeigen lassen möchte. Ein anderer Anwendungsfall kann darin bestehen, alle Geschäfte in der Umgebung anzuzeigen, in denen bestimmte Services, etwa alle Coca-Cola Verkaufsstellen, verfügbar sind. Im Endeffekt ist die Geolocation API relativ einfach zu bedienen und kann in Verbindung mit Google Places zu einem durchaus mächtigen und sinnvollen Tool auch für eigene Geschäftsanwendungen sein, egal ob es um Empfehlungen oder logistische Prozesse geht.

(dpe)

Von Sven Schannak

ist ein leidenschaftlicher Web-Entrepreneur, freiberuflicher Web-Entwickler und stolzer Coding-Monkey.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.