Google Maps API – Events

Im letzten Teil des Tutorials vertagt, so geht es heute erstmal um Events. Hintergrund ist der, dass bei Klick auf ein Placemark ein hübsches HTML-Popup aufgehen soll. Natürlich kennt die Google API verschiedene Events, allerdings primär click, dblclick und move.

Es gibt an dieser Stelle allerdings ein kleines Problem, ein Click-Event an sich ist ja ganz nett, aber es macht durchaus einen Unterschied, ob ich die Karte anklicke, oder ein Placemark. Entsprechend muss es eine Unterscheidung geben was ich eigentlich wie angeklickt habe. In HTML funktioniert dies, indem man ein Event einem einzelnen Objekt zuordnet (zum Beispiel einer Grafik), und nicht der gesamten Seite. Die Aktion wird nur dann ausgelöst, wenn sie dieses einzelne Objekt betrifft.

In der Google Maps API funktioniert dies ähnlich. Dort gibt es die sogenannten Event-Listener, die einem einzelnen Objekt zugeordnet werden. Ein Listener kann auch der gesamten Karte zugeordnet werden. Habe ich demnach zwei Listener, einen für die Karte und einen für ein Placemark, kann ich eventuelle Clicks unterscheiden. Erstmal geben wir uns auch damit zufrieden, dass jeder Placemark einen eigenen Listener bekommt. Eine einfaches Event wäre zum Beispiel das folgende:

GEvent.addListener(map, "click", function() {
   alert("Klick in die Karte.");
});

Mit diesem Befehl fügt man dem Objekt map (in unserem Fall der gesamten Karte) ein Event click hinzu. Die function wird ausgeführt, wenn der Event eintritt. Entsprechend öffnet sich bei Klick in die Karte eine Alert-Box mit dem Text „Klick in die Karte“. Wir wollen natürlich zum einen dem Event einem Placemark zuordnen, zum anderen wollen wir ein HTML-Popup und keine Alert-Box.

Viel machen müssen wir aufgrund des Befehls openInfoWindowHtml allerdings auch nicht. In Kombination mit einem Event-Listener sähe das Ganze dann so aus:

GEvent.addListener(placemark, "click", function() {
   placemark.openInfoWindowHtml("<h1>Klick auf Placemark</h1>");
});

placemark ist hierbei logischerweise ein Placemark, wie wir ihn schon im vorhergehenden Teil des Tutorials erstellt haben. Diesem fügen wir mit diesen 2 Zeilen zum einen ein Click-Event hinzu, zum anderen ein Info-Fenster das HTML unterstützt.

Wie man sieht, ist auch dies eine nicht sehr komplizierte Sache, die aber anstrengend werden kann, wenn man eine Vielzahl von Placemarks besitzt. Hier kann man durch entsprechend geschickten Aufbau des Javascripts allerdings viel Zeit und Mühe sparen. Dazu kommen wir allerdings erst später, nämlich dann, wenn die Demo-Applikation den Anschein erweckt, ansonsten nicht mehr wartbar zu sein. Zum nächsten Teil des Tutorials geht es hier entlang.

Ähnliche Beiträge

Tutorial Google Maps API – die Anfänge mit JavaScr... Wie versprochen kommt heute der erste Teil des Google Maps Tutorials, dass sich primär mit der API an sich und JavaScript beschäftigen wird. Bevor wir...
Tutorial Google Maps API – Komplettes Beispi... Fügt man alle Teile des Tutorials zu einem zusammen, erhält man das folgende JavaScript:var address = "Domkloster 4, 50667 Koeln...
Cartoview – Mashups Made Simple Zu jeder besseren Web2.0-Anwendung gehört heutzutage eine Map, sei es nur um Daten zu visualisieren, aber auch zur Nutzung von Location Based Services...
Placemarks in der Google Maps API Nachdem im ersten Teil des Tutorials in einem Div-Layer eine Landkarte eingeblendet worden ist, möchte ich in diesem Teil des Tutorials ein Placemark ...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.