Marker mit Infofenster
Der Marker kann auch ein Infofenster haben. Hierzu wird der Code entsprechend erweitert:
<script src="http://maps.google.com/maps?file=api&v=2&key=[Schlüssel]" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var mapcenter = new GLatLng(47.44694444, 11.69574722);
var markerpos = new GLatLng(47.43916667, 11.68812778);
var marker = new GMarker(markerpos);
map.setCenter(mapcenter, 13);
map.addOverlay(marker);
var info = "<font face=\"Comic Sans MS\">Herrliche Aussicht<br>in die Karwendeltäler.</font>";
marker.openInfoWindowHtml(info);
}
}
/* ]]> */
</script>
Aus dem Beispiel geht hervor, dass der Text, der im Infofenster steht, den HTML-Regeln entsprechend formatiert werden kann.
Wie zu sehen ist, kann man das Infofenster schließen. Um es wieder mit einem Klick auf den Marker öffnen zu können,
wird der Code wie folgt abgeändert:
<script src="http://maps.google.com/maps?file=api&v=2&key=[Schlüssel]" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var mapcenter = new GLatLng(47.44694444, 11.69574722);
var markerpos = new GLatLng(47.43916667, 11.68812778);
var marker = new GMarker(markerpos);
map.setCenter(mapcenter, 13);
GEvent.addListener(marker, "click", function() {
var html = "<font face=\"Comic Sans MS\">Herrliche Aussicht<br>in die Karwendeltäler.</font>";
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
GEvent.trigger(marker, "click");
}
}
/* ]]> */
</script>
Die Zeile GEvent.trigger(marker, "click"); sorgt dafür, dass das Fenster beim Laden der Seite angezeigt wird.