Open Source im professionellen Einsatz

Das API von Google Maps einsetzen

Aus großer Distanz

Alberto Planas

Google sorgte vor kurzem mit zwei Nachrichten für Überraschung: Die erste ist die Integration von Satellitenbildern in Google Maps, die zweite die Veröffentlichung eines API mit freiem Zugriff auf Bilder und Kartenmaterial für die Entwicklung von eigenen Webanwendungen.

Die Entwickler von Google haben eine Programmierschnittstelle (API) auf Basis von Javascript (respektive ECMA-Script, [1]) vorbereitet. Sie erleichtert es, Programme zu schreiben, die auf Satellitenbilder und Karten von Google Maps zugreifen. Die Anwendungen lassen sich einfach und direkt in eigene Webseiten einbinden und per Browser ausführen. Mit anderen Worten: Der eigene Browser (Firefox, Opera, Safari oder Internet Explorer) ist für die Ausführung der selbst geschriebenen Applikationen zuständig, eine spezielle Infrastruktur auf der Server-Seite ist nicht nötig.

Erste Schritte

Der Artikel stellt das Interface anhand eines Beispielprogramms vor, das über Mausklicks einen Weg auf Satellitenfotos oder Karten zeichnet, die zurückgelegte Strecke in Kilometern misst und anzeigt. Es kann zum Beispiel die Basis für einen digitalen Schrittmesser bilden.

Um das API verwenden zu dürfen, müssen sich Programmierer an folgende Richtlinien von Google halten [2]:

Eigene Entwicklungen müssen für jedermann frei
zugänglich sein.
Die Anfragen pro Tag dürfen ein bestimmtes Maß nicht
überschreiten.
Das Google-Logo muss auf der Seite sichtbar sein.

Den nötigen Zuggriff auf das API bekommen Entwickler unter [3]. Hier müssen sie sich mit einem bestehenden Google-Account anmelden. Dazu reicht ein Gmail-Konto. Wer keins hat, kann sich unter der genannten Adresse ein Konto einrichten.

Jeder Zugang ist mit einem User und einer Zugangs-URL verknüpft. Wer keine Webadresse hat, um seine Entwicklungen zu speichern, meldet sich mit der Adresse [http://localhost] an, um das Testprogramm lokal auszuführen. Dazu muss natürlich ein Apache-Server laufen. Bei der Angabe der Zugangs-URL ist darauf zu achten, die gesamte Adresse inklusive Ports und Ordner anzugeben, da sonst ein Zugriff auf das API-Angebot nicht möglich ist.

Das Beispiel geht davon aus, dass Apache über Port 8080 erreichbar ist und sich die Site im Ordner »maps« befindet. Die Zugangsadresse lautet somit:

http://localhost:8080/maps/

Pro Benutzer lassen sich beliebig viele Zugänge anmelden. Nach dem Akzeptieren der Vertragsbedingungen sendet Google Interessierten einen langen alphanumerischen Schlüssel zu. Es lohnt sich, ihn für den späteren Gebrauch in einer Datei zu speichern.

Der Flug des Phoenix

Als erstes Beispiel dient die in Listing 1 gezeigte HTML-Seite. Die offizielle API-Dokumentation [4] empfiehlt XHTML statt HTML. Die Gründe dafür liegen in der besseren Portierbarkeit, die der neue Standard bietet. XHTML-Dokumente deklariert der »DOCTYPE«-Eintrag in der ersten Zeile. Es ist empfehlenswert, die Zeilen 2 sowie 5 bis 9 des Listings so beizubehalten, damit auch der Internet Explorer einige der Effekte richtig anzeigen kann, die die Javascript-Bibliothek von Google Maps zur Verfügung stellt, vor allem die Streckenlinien, die das Beispiel später benötigt.

Zeile 10 in Listing 1 bindet die Javascript-Datei mit dem API-Code ein. Hier ist »XXXXX« durch den von Google erzeugten Schlüssel zu ersetzen. Nur so ist es möglich, bei Google angemeldet zu bleiben und die Funktionen des Google-Servers aufzurufen. Interessanterweise beschränkt sich das ganze XHTML des ersten Beispiels auf die Zeilen 24 und 25. Hier bestimmt der Code, dass der Browser nach dem Laden der HTML-Seite die Javascript-Funktion »onLoad« (definiert ab Zeile 13) ausführen soll. In Zeile 25 findet sich die Formulierung »<div>« mit 500 mal 500 Pixeln und dem Identifier »map«. Wozu dieser dient, erklärt der Artikel weiter unten.