Google Maps API – Geocodierung

31. Juli 2009 keine Kommentare Javascript

In den bisherigen Teilen des Tutorials haben wir eine Adresse immer mittels der Koordinaten übergeben. Wie schon festgestellt birgt das einiges an Problemen, da wir in der Regel die Koordinaten eines Ortes nicht kennen, und diese somit nachschlagen müssen. Um dieses Manko zu beheben, besitzt die Google Maps API eine sogenannte Geocodierung. Mittels dieser Geocodierung können zum Beispiel Placemarks auch mittels Adresse gesetzt werden.

Was sich eigentlich gut anhört, ist allerdings mit Vorsicht zu genießen. Die Koordinaten sind stets genauer, als das Resultat einer Geocodierung. Da verhaut sich Google schon mal gerne um 1-2 Häuser, wie es selbst zugibt. Bei einer Geocodierung handelt es sich stets um eine Annäherung, keine exakte Wissenschaft! Wer also genau positionieren will, kommt an Koordinaten nicht vorbei. Dies gilt übrigens auch für die sogenannte umgekehrte Geocodierung. In dem Fall gibt Google für eine ausgewählte Position auf der Karte (zum Beispiel durch Klick) die entsprechende Adresse zurück. Auch hier gilt, es handelt sich um eine Annäherung! Was auch logisch ist, wenn ich in einem Gebiet mit 100 Schrebergärten Nummer 39 anklicke, ist es sehr unwahrscheinlich, das dieser eine eigene postalische Adresse besitzt!

Unser Beispiel – der Kölner Dom – besitzt übrigens nicht nur eine Adresse, sondern sogar eine Hausnummer, die auch außen angeschlagen ist! :) Offiziell heißt das dann: „Hohe Domkirche St. Peter und Maria, Domkloster 4, 50667 Köln (Altstadt-Nord)“, tja, wer hätte dies gedacht. Möchte ich nun ein Placemark mit dieser Adresse setzen, hat man etwas Arbeit vor sich. Zunächst einmal muss man die Adresse bei Google abfragen:

var address = "Domkloster 4, 50667 Köln";
geocoder = new GClientGeocoder();
geocoder.getLocations(address, addToMap);

Eigentlich ganz einfach, oder? Der Befehl getLocations sorgt für die Auflösung der Adresse, aber was ist eigentlich addToMap? Nichts anderes als eine Callback-Function in JavaScript! Diese muss wie folgt aufgebaut sein:

function addToMap(response) {
}

In der Variable response ist das Ergebnis der Suche hinterlegt. Dabei handelt es sich um eine KML-Datei (XML), die wir verarbeiten können:

http://maps.google.com/maps/geo?q=domkloster+5,+50677+k%F6ln&output=xml&sensor=true_or_false&key=abcdefg

Wie man in der URL sieht, erhält die KML fast die gleichen Koordinaten, die wir zuvor verwendet haben! Diese können wir nun in der Callback-Function addToMap extrahieren:

function addToMap(response) {
   // Den Ort im KML isolieren
   ort = response.Placemark[0];
   // Die Koordinaten extrahieren
   point = new GLatLng(ort.Point.coordinates[1],ort.Point.coordinates[0]);
   // Die Karte mit dem Zoom-Level 13 auf diesem Punkt zentrieren
   map.setCenter(point, 13);
   // Für den Punkt einen Marker generieren
   marker = new GMarker(point);
   // Den Marker der Karte hinzufügen
   map.addOverlay(marker);
   // Dem Marker ein HTML-Popup mit der Adresse hinzufügen
   marker.openInfoWindowHtml(ort.address);
}

Auch nicht sonderlich schwer, aber wie gesagt: mit Vorsicht zu genießen! Die Ergebnisse können stimmen, müssen aber nicht! Nun sind wir eigentlich so weit ein Demo-System aufsetzen zu können und Google Maps zu optimieren und zu erweitern. Das komplette JavaScript zu diesem Beispiel findet ihr hier.