XML-Ecke

Google-Karten lassen sich mit ein paar Zeilen Javascript schnell in eine Webseite einbauen. Etwas aufwendiger wird es, wenn man statt der üblichen Stecknadeln von Google eigene Marker verwenden und diese mit Info-Fenstern ergänzen will. Die Google Maps API ist gut dokumentiert, die Klassen, Methoden und Eigenschaften lassen sich aber so vielfältig miteinander kombinieren, dass mitunter der Überblick verloren geht. 

Voraussetzung für die Einbindung einer Google Map ist ein “Key”, den man online anfordern kann. Dabei muss die Webadresse angegeben werden, für die man die Maps verwenden will. Der Schlüssel, den man so erhält, wird mit einer einfachen Javascript-Referenz in den HTML-Header eingebunden:

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFGH12345....&hl=de"></script>

Weiter geht es mit einem zweiten Skript, das zunächst die allgemeinen Zutaten für die zu erstellende Karte festlegt:

google.load("maps", "2");
 
    function initialize() {
		if (GBrowserIsCompatible()) {

Mit der ersten Zeile wird die Google Maps API in das Skript geladen, so dass sämtliche Funktionen bereitgestellt werden – die Ziffer 2 bezieht sich auf die Version; Google Maps API 2 wurde heute vor drei Jahren veröffentlicht. Danach werden die Funktionen initialisiert und es wird überprüft, ob der Browser damit zurechtkommt.

In den nächsten sechs Zeilen wird das Kartenbild eingerichtet:

var map = new google.maps.Map2(document.getElementById("my_map"));
		map.setMapType(G_PHYSICAL_MAP);
		map.addControl(new google.maps.SmallMapControl());
		map.addControl(new google.maps.MapTypeControl());
		map.enableScrollWheelZoom();
                map.setCenter(new google.maps.LatLng(48.240057, 12.557873), 4);

Hier wird die Javascript-Variable map definiert, die im mitgelieferten Argument eine ID, also einen eindeutigen Namen bekommt, mit dem die Karte dann im Body der Webseite aufgerufen wird. Dabei darf man sich den Kartentyp aussuchen: Wenn man nichts angibt, erscheint als Standard die “normale” Karte mit Ortsangaben und Straßen. Hier habe ich die nicht so oft verwendete “physical map” gewählt, die das Landschaftsbild besonders gut darstellt. (Alternativ wären “GHYBRIDMAP” und “GSATELLITEMAP” möglich). Danach werden zwei Steuerungsbausteine eingerichtet: Oben links kommt die SmallMapControl hin, mit ihren Buttons zum Verschieben der Karte in vier Richtungen und zum Zoomen. Die MapTypeControl wird in die andere Ecke platziert, sie enthält Schaltflächen zum Umschalten zwischen verschiedenen Kartentypen. Mit map.enableScrollWheelZoom() wird das Zoomen mit dem Mausrad ermöglicht – standardmäßig ist diese Funktion abgeschaltet. Und mit map.setCenter schließlich wird die Mitte der Landkarte definiert: Dabei kommt die Klasse GLatLng (oder nach neuerer Schreibweise google.maps.LatLng) zum Einsatz, die in Klammern die Dezimalwerte für die geografische Breite und für die geografische Länge nennt, gefolgt vom Zoomfaktor: Mit 0 wird die ganze Welt angezeigt, mit 19 sieht man einzelne Häuser.

Anschließend wird der eigene Marker eingerichtet:

var my_icon = new GIcon();
	my_icon.image = "http://www.my_site.de/my_marker.png";
	my_icon.shadow = "http://www.my_site.de/shadow-my_marker.png";
	my_icon.iconSize = new GSize(16, 20);
	my_icon.shadowSize = new GSize(20, 27);
	my_icon.iconAnchor = new GPoint(8, 10);
	my_icon.infoWindowAnchor = new GPoint (5, 1);

In diesem Block wird zunächst eine weitere Variable eingeführt, welche die Eigenschaften der Klasse GIcon besitzt. Es wird angegeben, wo das Bildchen zu finden ist, gefolgt von der URL für das zugehörige Schattenbild – ein grafischer Effekt, der je nach Bild und Karte einen hübschen Eindruck macht. Das Bild für den eigenen Marker erstellt man im png-Format. Mit Hilfe eines transparenten Hintergrunds kann man eigene Formen gestalten, so dass der Marker nicht als Rechteck auf der Seite auftaucht. Das Schattenbild kann man ebenfalls mit der Bildbearbeitung erstellen, einfacher ist es aber, diese Aufgabe dem “Shadowmaker” im Internet anzuvertrauen. Schließlich wird noch die Position des Markers auf der Karte festgelegt – als Pixelkoordinate relativ zur oberen linken Ecke des Bildchens. Weil sich dessen Größe nicht mit der Zoomstufe ändert, muss man ein bisschen herumprobieren, welche Werte dafür vorteilhaft sind. In der letzten Zeile des oben aufgeführten Blocks wird dann auch noch die Position für das Info-Fenster definiert.

Nun kann man anfangen, die Punkte einzurichten, die auf der Karte markiert werden sollen:

var point1 = new GLatLng(41.32452158, 14.25180511);
	var marker1 = new GMarker(point1,my_icon);
	map.addOverlay(marker1);
var point2 = new GLatLng(43.15493511, 12.52571373);
	var marker2 = new GMarker(point2,my_icon);
	map.addOverlay(marker2);

Auch hier wird wieder mit Variablen gearbeitet. Zunächst wird jeder Punkt auf der Karte als Variable definiert und mit seinen Geodaten festgelegt. Direkt danach wird auch das Marker-Symbol, also die Stecknadel für den geografischen Punkt als Variable eingerichtet, und zwar als eine Instanz der Klasse namens GMarker. Angegeben werden dafür zwei Argumente, nämlich die Variable für den Punkt und unsere Icon-Variable, mit der wir zuvor die Grafik für die Stecknadel eingerichtet haben. Schließlich folgt die Anweisung, auf der Karte etwas zu tun, nämlich ein “overlay” darüberzulegen. In Klammern wird gesagt, was da auf die Karte gezeichnet werden soll, nämlich unsere gerade eingerichteten Variablen für die Marker. Auf diese Weise können beliebig viele Punkte eingerichtet und auf der Karte dargestellt werden.

Im nächsten Schritt wird zu jedem Marker ein Infofenster gebastelt:

GEvent.addListener(marker1, "mouseover", function() { 
        marker1.openInfoWindowHtml("Text1, evtl. mit Bild: <img src=http://www.my_site.de/bild1.jpg width=60 height=80 /> <br /> und mit Links: <a href=http://www.my_site.de/index.html> Startseite</a>"); 
        }
); 
GEvent.addListener(marker2, "mouseover", function() { 
        marker2.openInfoWindowHtml("noch ein Text"); 
        }
);

Das Info-Fenster soll erscheinen, wenn man mit der Maus über den Marker fährt. Dazu wird die Klasse GEvent.addListener aufgerufen, die genau aufpasst, ob der Besucher der Webseite auf der Karte etwas tut. Hier wird dieser Aufpasser-Klasse erst ein Objekt genannt, auf das aufgepasst werden soll, nämlich unser Marker. Danach wird die Art des zu beobachtenden Ereignisses genannt: “mouseover”. Alternativ kann man u.a. auch “click” angeben. Anschließend wird als Funktion beschrieben, was passieren soll, wenn das Ereignis eintritt: openInfoWindowHtml. Und in die folgende Klammer wird in Anführungszeichen alles das gepackt, was in dem Info-Fenster stehen soll – das können auch HTML-Anweisungen sein, wie im Beispiel des Info-Fensters zum marker1.

Zum Schluss dieses Skripts – wir befinden uns immer noch im Header – muss man aufpassen, alle Klammern sorgfältig zu schließen. Dann kommt noch eine letzte Anweisung:

google.setOnLoadCallback(initialize);

Damit wird es ermöglicht, die verschiedenen API-Funktionen auch zu nutzen, sobald das Dokument fertig geladen ist.

Schließlich muss die Karte noch im Body der Webseite platziert werden, wobei die oben eingerichtete ID zum Zuge kommt:

<body onunload="GUnload()">
<div id="my_map" style="width: 800px; height: 600px;"></div>
</body>

Dem Body-Tag wird noch ein Attribut spendiert, mit dem Speicherlecks im Browser verhindert werden. Anschließend wird die Karte mit einem div-Tag eingefügt. Die genaue Platzierung kann man mit CSS-Anweisungen für “my_map” gestalten, etwa um Platz für das Navigationsmenü der Seite zu lassen.

Ein Beispiel für eine solche interaktive Karte findet sich auf der Orchideen-Website www.albiflora.eu – dort kann man sich auch den gesamten Quelltext für das Skript anschauen. Anstatt alle Daten in das Skript einzubinden, ist es auch möglich, diese in eine XML-Datei auszulagern, nach dem Schema für das von Google entwickelte KML-Format.

Der Beitrag wurde am Freitag, den 3. April 2009 um 21:46 Uhr veröffentlicht und wurde unter Im Lauf der Zeit, Tutorial abgelegt. Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.