Workshop GoogleMaps Teil 2: Interaktive Markierungen

Markierungen und Info-Fenster anzeigen

Da es mit der gerade programmierten Funktion showAddress ein Leichtes ist, auch mehrere Adressen anzuzeigen, kommt jetzt eine weitere sinnvolle Funktion von GoogleMaps ins Spiel: Das Anzeigen einer Markierung an einer bestimmten Kartenposition. Dazu erzeugen wir nach dem Aufruf von setCenter() zuerst ein neues Marker-Objekt:

var marker = new GMarker(point);

Wer möchte, kann optional noch einen Titel angeben, der dann beim MouseOver als Text eingeblendet wird (wie bei Grafiken beispielsweise üblich), also stattdessen:

var marker = new GMarker(point,{title:"Münchner Marienplatz"});

Das zweite Argument ist dabei ein Objekt des Typs GMarkerOptions, welches als Objekt Literal übergeben wird. Dabei wird die Eigenschaft title des Objekts gesetzt. Sie können zusätzlich jedoch auch noch die anderen in der API Referenz aufgelisteten Eigenschaften von GMarkerOptions setzen, beispielsweise

var marker = new GMarker(point,{title:"Münchner Marienplatz", draggable:true});

um dem Benutzer zu erlauben, die Markierung mit der Maus zu verschieben. Mit der Methode addOverlay() wird die Markierung schließlich der Karte hinzugefügt. Sie können auf diese Weise beliebig viele Markierungen setzen:

map.addOverlay(marker);

Zusätzlich zur Markierung lässt sich ein Info-Fenster über der Markierung anzeigen, und dort einen Text ausgeben. Dabei ist die Verwendung von HTML möglich, also beispielsweise

marker.openInfoWindowHtml("Der <b>Marienplatz</b> in München");

So lassen sich auch Bilder und Links in einem Info-Fenster anzeigen.