(Web-) Mapping

Google-Maps in die eigene Website einbinden - Teil 1: Hallo Rollberg!

Google Maps sind nicht nur ein faszinierendes, sondern manchmal sogar auch ein nützliches Spielzeug. Denn seit der Verfügbarkeit des Google Map APIs kann man Google Maps auch in die eigene Website einbinden und allerlei Seltsames damit anstellen.

In diesem einführenden Tutorial soll gezeigt werden, wie so etwas geht.

Zuerst der Developer Key

Wie bei fast allen Webservice-APIs muß man sich vorher einen Developer Key bei Google besorgen. Ihn kann man sich leicht auf der Google Map API Website selber generieren. Das ist auch notwendig, denn der Key gilt immer nur für ein Directory (ohne Sub-Directories) auf einem Server, für jedes weitere Directory braucht man wieder einen separaten Key.

Der Zugriff auf das API ist frei wie Freibier, aber Google behält sich vor, das API zu ändern oder zu einem späteren Zeitpunkt Werbung einzublenden. Das sind die wichtigsten Einschränkungen, aber es lohnt sich, die Terms of Use durchzulesen, bevor man akzeptiert.

Gesponserter Link

Ein Beispiel, wie man das Google Map API einsetzen kann, ist Store Locator, ein Service zur Lokalisierung von Geschäften und Händlern.

Hallo Rollberg!

Ich habe den ewig langen Developer-Key generiert und die dann angezeigte Default-Seite aufgerufen und alles war schön. Damit eine Webseite überhaupt funktionert, muß man das API-Script irgendwo im Header seiner Seite einbinden:

<script src="http://maps.google.com/maps?file=api
&v=1&key=[Dein API Key]" type="text/javascript">
</script>

Ohne dies funktioniert gar nichts. Dann habe ich den Default-Text leicht modifiziert, damit er

1. den Rollberg und nicht Kalifornien anzeigt und
2. überhaupt etwas anzeigt, da für Europa (mit Ausnahme von England) nur Satellitenbilder und (noch?) keine Karten existieren.

Das modifizierte Skript sieht dann so aus:

<div id="map" style="width: 460px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setMapType(G_SATELLITE_TYPE);
map.centerAndZoom(
new GPoint(13.426837921142578, 52.48142115832729), 4);
//]]>
</script>

Und damit erhalten wir tatsächlich einen Blick von oben auf die höchste Neuköllner Erhebung samt benachbarten Flughafen Tempelhof und ein wenig Spreeblick. Ihr könnt reinzoomen, rauszoomen, die Karte verschieben und alles andere damit anstellen, was Ihr auch mit anderen Google Maps anstellen könnt.

Das sieht alles komplizierter aus, als es ist und zum Glück ist auch die Dokumentation des APIs bei Google sehr ausführlich und verständlich gehalten.

Zuerst einmal wird in einem <div> ein Name für die Map und die Höhe und Breite, die sie einmal belegen soll, festgelegt. Der eigentliche Aufruf erfolgt in dem darunterliegenden JavaScript. Da der Code auch einmal (X)HTML-Tags enthalten kann, ist es wichtig, den Quelltext des Scriptes in eine CDATA-Section zu kapseln. Das API verfolgt einen objektorientierten Ansatz. So wird in der ersten Zeile ein GMap-Objeckt erzeugt, dessen Namen mit der ID des darüberliegenden <div> übereinstimmen muß.

Danach habe ich einige Kontrollelemente hinzugefügt und — das ist wichtig für das kontinentale Europa — den MapType auf G_SATELLITE_TYPE festgelegt, damit ein Satellitenbild und nicht die per Default eingestellte aber in unserem Falle nicht vorhandene Landkarte eingeblendet wird.

Und zum Schluß habe ich die Koordinaten und die Zoomstufe (»4«) für einen neuen GPoint angegeben, der erzeugt werden soll.

Koordinaten

Das ist alles! Doch halt, noch nicht ganz. Denn wo habe ich eigentlich die Koordinaten her? Es gibt dafür verschiedene Möglichkeiten, die einfachste davon findet man im Google Map Wiki (GoogleMapki). Dort findet man nämlich die (Google Map) Anwendung Get Lon Lat, die es einem erlaubt, interaktiv die entsprechenden Koordinaten für »seinen« Punkt herauszufinden. Doch entgegen seinem Namen zeigt es erst die Latidude und dann die Longitude an. Google Map verlangt aber die Eingabe genau umgekehrt. Daher war ich bei meinen ersten Versuchen immer irgendwo im Indischen Ozean gelandet. (Ja, es ist korrekt beschriftet, aber das hatte ich in meiner Begeisterung übersehen. )

Mit diesen Informationen solltet Ihr in der Lage sein, Eure ersten eigenen Gehversuche mit dem Google Map API zu unternehmen.

Bei diesem kleinen Tutorial hat mir der Hack 10: Adding A Google Map To Your Website (, 388 KB) aus dem hoffentlich bald erscheinenden Buch Google Maps Hacks sehr geholfen.

[Update]: Google hat zwischenzeitlich die Version 2 seines Map-APIs herausgegeben. Was sich dort alles geändert hat, steht im zweiten Teil dieses Tutorials.

Technorati-Tags: GoogleMap Mapping Webworking

Posted by Jörg Kantel | Permalink | | | Mapping