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 setzen. Bei Klick auf das Placemark soll ein hübsches HTML-Popup aufgehen. Das HTML-Popup verschieben wir aber erstmal, weil wir dafür Events brauchen. Schließlich handelt es sich beim Klick auf ein Placemark um nichts anderes als um ein OnClick-Event.

Um ein Placemark zu setzen, brauchen wir zunächst einmal die Koordinaten des Ortes, an dem das Placemark gesetzt werden soll. Hier nehmen wir wieder den Kölner Dom aus dem ersten Teil des Tutorials. Entsprechend muss für diesen Ort ein sogenannter GPoint erzeugt werden:

var point = new GPoint(50.94124490642813, 6.958165168762207);

Dieser GPoint stellt schlicht und ergreifend eine Koordinate dar, an der später der Punkt erscheinen soll. Nun muss an diesem Punkt nur noch ein Marker eingefügt werden:

map.addOverlay(new GMarker(point));

GMarker stellt hierbei einen einzelnen Marker dar, der an dem Punkt point angezeigt werden soll. Mittels map.addOverlay wird der Marker der Karte hinzugefügt, und auf dieser angezeigt.

Das war es auch schon – Marker hinzufügen ist wirklich eine einfache Sache in Google Maps!

Ähnliche Beiträge

Google Maps API – Geocodierung In den bisherigen Teilen des Tutorials haben wir eine Adresse immer mittels der Koordinaten übergeben. Wie schon festgestellt birgt das einiges an Pro...
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...
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...
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-Pop...

Schreibe einen Kommentar

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