Google Map Hacks III

Nach den ersten Grundlagen in den Teilen I.und II. geht es nun in die dritte Runde der Google Map Hacks. Thema sind dieses mal die Möglichkeiten rund um die Marker.

Bevor es zum eigentlichen Thema kommt. Es hat sich ein Problem mit der Kartendarstellung in einem Blog ergeben. Sobald sich auf der Dargestellten Webseite nicht die Division für die in der load() Funktion definierten Karten finden lässt, wird die Funktion abgebrochen und keine weiteren folgenden Kartendefinitionen ausgeführt. Auf die Schnelle ist mir noch keine Lösung eingefallen. Ich arbeite aber daran. Der mehr schlechte als rechte Workaround ist jetzt erst einmal auf die älteren zwei Karten im Block zu verzichten.

Die erste Möglichkeit Marker zu platzieren ist, die im Teil II gezeigte direke Erzeugung der Marker im Javascript. Daneben gibt es auch die Möglichkeiten die Markerinformationen per lokaler oder verlinkter Datei zu importieren. Als Dateiformat sind beispielsweise XML oder der Google eigenen KML möglich. Diese Dateien können natürlich auch dynamisch etwa mit PHP oder Perl Skripten erzeugt werden.

Ein wichtiges Feature der zur Informationsvermittlung mit den Markern sind die Infofenster. Sie können mit html/css gestaltet werden und neben Text auch Bilder und Videomedien enthalten. Die Infofenster können als einfaches Fenster aber auch als Tabbare Fenster gestaltet werden. Zur Verfendung der Infofenster wird ein Eventhandler benötigt hört sich kompliziet an - ist es aber auf Grundlage der zurückliegenden Tutorials nicht.


function load() {
if (GBrowserIsCompatible()) {

var map3 = new GMap2(document.getElementById("map3"));
map3.addControl(new GSmallMapControl());
map3.addControl(new GMapTypeControl());
map3.setCenter(new GLatLng(48.2086,16.3619), 14);

marker = new GMarker(new GLatLng(48.2086,16.3719));

GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml('Hallo Welt!');
});

map3.addOverlay(marker);
}
}


Im wesentlichen ist jetzt nur der Eventhanlder GEvent.addListener() dazugekommen. Das erste Argument marker verweißt auf das Objekt, daß der Eventhandler beobachtet, das zweite Argument 'click' auf welche Aktion er reagieren soll - in diesem Fall einen Mausklick und als letztes Argument wird ihm eine Funktion auf den Weg gegeben, die er im Falle der Aktion ausführen soll.

Der Google Evenhandler kennt außer click Aktionen wie dblclick, move und einige mehr. Mir ist leider bisher noch keine vollständige Zusammenstllung der möglichen Ereigenisse bekannt.

Die Funktion für den Event öffnet in diesem Fall eine Inforamtionsgfenster, dessen Argument ein Html-Text ist. In dieser Text kann auch Links, Bilder oder etwas youtube Videoobjekte enthalten. Die Funktion kann natürlich auch außerhalb des GEvent-Aufrufes implementiert werden. So könnte man zB in einem Reiseblog die mehr oder weniger wichtigen touristischen Highlight präsentieren. Der setzt einen Marker am Ort des Wiener Stephansdom und beinhlatet ein Infofenster mit Bild des Domes sowie ein Link auf seinen Wikipediaartikel:


var map3 = new GMap2(document.getElementById("map3"));
map3.addControl(new GSmallMapControl());
map3.addControl(new GMapTypeControl());
map3.setCenter(new GLatLng(48.2086,16.3719), 14);
marker = new GMarker(map3.getCenter());

var infotext = "Der Wiener <a href=\"http://de.wikipedia.org/wiki/Stephansdom_(Wien)\" "+
"title=\"Wiener Stephansdom\">Stephansdom</a> überragt<br /> die Wiener Altstadt:<br /> "+
"<img src=\"BILDQUELLE\"alt=\"Wiener Stephansdom\" height=\"200\" />
<br style=\"clear: both\" />";

GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(infotext);
});

map3.addOverlay(marker);

Nebem der einfachen Infobox ist auch eine Infobox mit verschiedenen Reitern (getabbed oder wie auch immer das azf Denglisch heißt) möglich:
tabmarker = new GMarker(new GLatLng(48.21083,16.35694));
var tab1="Wiener Rathaus";
var tab2="moch mehr Infos";
var infotabs = [
new GInfoWindowTab("Tab 1",tab1),
new GInfoWindowTab("Nummer 2",tab2)
];
GEvent.addListener(tabmarker,'click', function() {
tabmarker.openInfoWindowTabsHtml(infotabs);
});
map3.addOverlay(tabmarker);

Die verschiedenen Infoboxseiten werden in einem Vektor (Array) als GInfoWindowTab abgelegt. Das GInfoWindowTab-Objekt erhält als erstes Argument den Namen des Reiters und als zweites den Informationstext, der wieder auch Html-Code zulässt. Im Eventhandler besteht der einzige Unterschied, daß die openInfoWindowHtml Methode durch die openInfoWindowTabsHtml Methode ersetzt wird, das als Argument das Infotabs Array mit auf den Weg bekommt. Beide verschiedenen Infoboxen sind auf folgender Karte zu sehen. Die Infoboxen öffnen sich durch einen Mausklick auf die jeweiligen Marker:

Im nächsten Teil wird gezeigt, wie Adressdaten in geographische Koordinaten umgewandelt werden. Eventuel ist mir bis dahin auch schon eine Lösung für mehrere Karten eingefallen. Um die Problematik noch einmal zu erläutern: Es ist kein Problem mehrere Karten auf einer Seite darzustellen. Falls aber etwas eine in der load()-Funktion implementierte Karte nicht auf der dargestellten Seite zu finden ist, bricht das Javascript Programm ab.