Beispiel 7
Auf der Karte befinden sich vier rote Ballons. Beim Anklicken öffnet sich jeweils ein eigenes Informationsfenster, das sich auch wieder schließen lässt. Es ist aber auch möglich, direkt den nächsten Ballon anzuklicken.
Skript
Das Skript gleicht Beispiel 6, verwendet aber einen Array, um die vier roten Ballons (GMarker) und Informationsfenster (Overlay) effektiv einzufügen. Die selbstdefinierte Funktion createListener erzeugt die vier Listener, die GEvent benötigt um die GMarker zu überwachen. Zusätzlich wird noch der Text für die Informationsfenster übergeben.
function load() {
function createListener (marker, text) {
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
}
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var control = new GLargeMapControl();
map.addControl(control);
control = new GMapTypeControl();
map.addControl(control);
map.setCenter(new GLatLng(49.410415,8.70340), 14);
map.setMapType(G_HYBRID_MAP);
var point = new Array();
var text = new Array();
point[0] = new GLatLng(49.409385,8.693254);
text[0] = "<strong>Heidelberg Bismarckplatz</strong><br />Der Verkehrsknoten in der<br /> Heidelberger Altstadt.";
point[1] = new GLatLng(49.412167,8.709658);
text[1] = "<strong>Heiliggeistkirche Heidelberg</strong><br />Eine bedeutende Kirche im<br />Herzen der Heidelberg Altstadt.";
point[2] = new GLatLng(49.410903,8.706365);
text[2] = "<strong>Universitätsplatz Heidelberg</strong><br />Zentrum der Universität Heidelberg,<br /> die Gebäude im ganzen Stadtgebiet hat.";
point[3] = new GLatLng(49.410715,8.715345);
text[3] = "<strong>Heidelberger Schloss</strong><br />In dieses alte Gemäuer zieht es<br />jährlich unzählige Touristen.";
var marker = new Array();
for (i=0; i< point.length; i++) {
marker[i] = new GMarker(point[i]);
map.addOverlay(marker[i]);
createListener (marker[i], text[i]);
}
}
}