Google Maps für die WebsiteWebanwendungen mit Landkarten

Tipps & Tricks

Google Maps für die Website

Für ganz Deutschland und Europa liegen nunmehr hochauflösende Satellitenkarten und sämtliche Straßenkarten vor. Da die Maps auf Anhieb nicht unbedingt leicht zu handhaben sind, sollten Sie bereits mit Javascript vertraut sein, besonders dann, wenn Sie die Karten mit Markern, Polylines und Info-Fenstern ausstatten wollen.

Ort und Typ der anzuzeigenden Karten bestimmen Sie frei bei der Programmierung. Der Anwender hat die Möglichkeit, die Karte mit der Maus zu verschieben, hinein- und herauszuzoomen sowie Info-Material aufzurufen. Die Maps sind bislang werbefrei und lassen sich in private und gewerbliche Sites in beliebiger Anzahl und Größe einbinden. Bei über 50000 täglichen Zugriffen sollten Sie jedoch vorher bei Google anfragen. Die Karten basieren komplett auf Javascript.

Dieser Workshop zeigt Ihnen Tricks zum Einbinden von Google Maps in Ihre Website mit der neuen API-Version 2, die über die offizielle Dokumentation hinausgehen. Er stellt darüber hinaus eine umfangreiche Beispieldatei mit Kommentaren zur Verfügung. Weiter finden Sie auf der Heft-CD mehrere Skript-Bibliotheken, mit denen sich viele Features der API auf einfache Weise erweitern lassen.

Gewünschte Karte laden

Google Maps für die Website

Für die Ortsangaben der Karten und Marker sind zwei Koordinaten, genannt Latitude und Longitude, notwendig. Da Google keine Geokodierung anbietet, sind diese Werte leider nicht direkt abrufbar. In der beigefügten XML-Datei auf der Heft-CD finden Sie die Werte fast aller deutschen Großstädte und europäischen Hauptstädte. Andere benötigte Werte lassen sich leicht über externe Quellen beziehen.


var mapdiv = document.getElementById("map");
function buildMap() {
map = new GMap2(mapdiv);
map.setCenter(new GLatLng(parseFloat(markers[0].getAttribute("lat")), parseFloat(markers[0].getAttribute("lng"))), 5)
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
}


Mit dem GMap2-Konstruktor erzeugen Sie ein Kartenobjekt, das sich innerhalb eines div-Elements befinden sollte. Damit legen Sie für die Karte eine beliebige Position und Größe fest. Natürlich können Sie auch mehrere Karten in eine Seite einbinden.
Achten Sie bitte darauf, dass die Variable map global ist. Erst dadurch können Sie im gesamten Skript auf sie zugreifen, um sie etwa mit Linien und Info-Fenstern zu versehen. Vermeiden Sie es in jedem Fall, das Wort long als Variable zu verwenden, weil es sich dabei um ein reserviertes Wort handelt.

Die Methode setCenter() lädt die Karte im angegebenen Ortspunkt und mit dem festgelegten Zoomfaktor 5. Die möglichen Werte für den Zoomfaktor reichen von 0 bis 17. Mit setMapType() lässt sich von Anfang an der gewünschte Kartentyp laden, etwa eine Satellitenkarte. Die verfügbaren Optionen heißen: G_NORMAL_MAP, G_SATELLITE_MAP und G_HYBRID_MAP. Am Ende werden Kontrollelemente hinzugefügt, die es dem Anwender erlauben, hinein- und herauszuzoomen oder auf einen anderen Kartentyp umzuschalten.

Ajax für die Abfrage

Google Maps für die Website

Der Vorteil von Ajax besteht darin, dass wesentliche Inhalte der Seite auf externen Daten beruhen. Werden diese Daten stets aktuell gehalten, dann verfügt der Anwender immer über die neuesten Informationen. Auf diese Weise lassen sich etwa auf einer Karte nur jene Parkhäuser anzeigen, in denen noch Plätze frei sind. Der Aufwand dafür ist relativ gering, weil außerhalb der Datenbank keine Änderungen vorzunehmen sind.

Da die dokumentierte Methode GDownloadUrl() mit dem IE nicht in allen Fällen klappt, verwenden Sie für die Ajax-Abfrage am besten die klassische Methode:


function readData() {
var request = GXmlHttp.create();
request.open("GET", "db.xml", true);
request.onreadystatechange = function() {
if( request.readyState == 4 ) {
var xml = request.responseXML;
markers = xml.documentElement.getElementsByTagName("ger");
buildMap();
}
}; request.send(null);
}


Der Code zeigt Ihnen, wie Sie über die API eine XML-Datei, hier db.xml, mittels Ajax laden und auslesen. Auf die Unterschiede in der Implementierung des XML-HTTP-Objekts in den verschiedenen Browsern brauchen Sie hierbei nicht zu achten. Denn das wird alles von der API erledigt.

Im Wesentlichen wird nach Verbindungsaufbau über den Event-Listener onreadystatechange abgefragt, ob die readyState-Variable den Wert 4 aufweist. In diesem Fall besteht eine vollständige Verbindung, und die gewünschten Elemente werden in der Variablen markers gespeichert. Wenn es sich hierbei um eine globale Variable handelt, steht sie im gesamten Skript zur Verfügung, und Sie brauchen die Daten kein weiteres Mal vom Server anfordern.

Die zu Grunde liegende XML-Datei sieht folgendermaßen aus:

Weil in den Namens-Attributen auch Umlaute vorkommen können, sollte die Angabe des Zeichensatzes ISO-8859-1 keinesfalls fehlen. Kontrollieren Sie bitte auch, dass die Datei keine sonstigen Fehler oder unnötige Leerstellen enthält.

Kontrollelemente

Google Maps für die Website

In der neuen API wurde zu den bereits bestehenden Kontrollelementen ein neues hinzugefügt: das Element GOverviewMapControl. Hierbei handelt es sich um eine verkleinerte Karte, die die Umgebung der Hauptkarte anzeigt. Es ist auch deshalb recht beliebt, weil die Bewegungen auf beiden Karten immer simultan verlaufen, wodurch man größere Entfernungen schnell überbrücken kann.

Um dieses Kontrollelement an der von Ihnen gewünschten Stelle zu positionieren, müssen Sie auf nicht dokumentierte Weise vorgehen:


overview = new GOverviewMapControl(new GSize(165,165));
map.addControl(overview);
setOverviewPos();


Zunächst speichern Sie das neu erzeugte Element in einer globalen Variablen. Mit dem Konstruktor GSize() erzeugen Sie ein Rechteck in der angegebenen Breite und Höhe in Pixel. Damit legen Sie die Größe des Kontrollelements fest.

Als Container für dieses Element wird von der API ein div-Bereich mit der ID map_overview angelegt. Sie dürfen diesen div-Bereich also nicht selbst zur Verfügung stellen, weil er sonst doppelt vorhanden wäre. Mit dem nun bekannten Wissen ist es aber nicht mehr schwierig, das Element exakt zu positionieren.

Sie brauchen lediglich die style-Eigenschaften left und top des div-Bereichs in einer eigenen Funktion zu definieren. Und in setOverviewPos() setzen Sie einen Timeout auf diese Funktion, so dass sie mit einer gewissen Verzögerung ausgeführt wird. Der Timeout ist deshalb notwendig, damit das vom Google-Server geladene Element beim Funktionsaufruf auch vorhanden ist. Da Sie ansonsten eine Fehlermeldung erhalten, müssen Sie nur darauf achten, den Timeout auch für langsamere Verbindungen hoch genug anzusetzen.

Marker und Info-Fenster

Google Maps für die Website

Marker repräsentieren einen Punkt auf der Karte, der jeweils mit den beiden bekannten Werten festgelegt wird. Soll beim Anklicken der Marker ein Info-Fenster geöffnet werden, definieren Sie dies gleich beim Erstellen der Marker. Dafür verwenden Sie am besten die folgende Hilfsfunktion. Damit es zu keinen Überschneidungen mit anderen Variablennamen kommt, notieren Sie hier nur lokale Variablen. Die genaue Berücksichtigung des Geltungsbereichs der Variablen zählt mit zum Wichtigsten bei der Map-Programmierung.


function createMarker(point, icon, name) {
var info_html = "