Teil 3: Google Maps kreativ nutzen
- Google Maps kreativ nutzen
- Teil 2: Google Maps kreativ nutzen
- Teil 3: Google Maps kreativ nutzen
- Teil 4: Google Maps kreativ nutzen
Mit dem GMap2-Konstruktor erzeugen Sie im HTML-Element mapdiv ein neues Kartenobjekt, das mit setCenter() am angegebenen Punkt zentriert wird. In gleicher Weise erstellen Sie mit GIcon() ein Objekt zur Darstellung der Icons, für das Sie mit der Eigenschaft image die gewünschte Datei festlegen. D...
Mit dem GMap2-Konstruktor erzeugen Sie im HTML-Element mapdiv ein neues Kartenobjekt, das mit setCenter() am angegebenen Punkt zentriert wird.
In gleicher Weise erstellen Sie mit GIcon() ein Objekt zur Darstellung der Icons, für das Sie mit der Eigenschaft image die gewünschte Datei festlegen. Die aufgerufene Hilfsfunktion addIcon() stattet die Icons mit den notwendigen Größenangaben aus.
Die folgende for-Schleife liest die im data-Array definierten Koordinaten aus und speichert sie als passende Typen in ein neues globales Array. Dasselbe geschieht mit den Markern, nur dass diese noch zwei zusätzliche Eigenschaften erhalten.
Dabei handelt es sich um content, in dem sich der Inhalt des jeweiligen Infofensters befindet, und um nr, den Wert des Schleifenzählers. Damit lässt sich später leicht herausfinden, welcher Marker manuell angeklickt wurde.
Dem Konstruktor GPolyline() brauchen Sie anschließend nur das Array points zu übergeben, um die beabsichtigte Linie zu ziehen. Mit den weiteren Argumenten lassen sich Farbe, Breite und Transparenz der Linie festlegen.
Die Linie wird dann ebenso wie die Marker mit addOverlay() über die Karte gelegt. openInfoWindowHtml() ist eine weitere von der API zur Verfügung gestellte Methode. Sie dient zum Öffnen eines Infofensters.
Als Argument erwartet sie formatierten HTML-Text, wie ihn der gerade in content gespeicherte Inhalt aufweist. Zu diesem Zeitpunkt wird zunächst nur das Infofensters des ersten Markers geöffnet.
Am Ende rufen Sie mit einer Verzögerung von einigen Sekunden die Funktion anim() auf. Damit stellen Sie sicher, dass bis dahin die gesamte Karte geladen ist.
Wichtig ist dabei, dass der Rückgabewert des Timeouts in einer globalen Variablen gespeichert wird, damit die Animation jederzeit beendet werden kann.
Bedienelemente
Die Karte lässt sich flexibler bedienbar machen, wenn die Marker mit einem KlickListener versehen werden. Der Anwender kann dadurch sämtliche Ortspunkte in seinem eigenen Tempo von Hand aufrufen, weil sich die jeweiligen Infofenster auch bei ausgeschalteter Animation öffnen:
function addClickevent(marker) {
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml
(marker.content);
count = marker.nr;
stopClick = true;
});
return marker;
}Der Aufruf der Funktion erfolgt in der for-Schleife von buildMap(), sodass ihr der Reihe nach alle Marker übergeben werden. Zum Einsatz kommt wieder openInfo WindowHtml(). Zugleich ändern Sie den Zähler count, damit die Animation genau beim zuletzt angeklickten Marker startet.
Vergessen Sie nicht, den Wert von stopClick zu wechseln. Um die Animation anzuhalten und fortzusetzen, benötigen Sie noch zwei Funktionen. Diese werden über Buttons in der Karte aufgerufen:
function haltAnim() {
if(route) {
clearTimeout(route);
stopClick = true;
}
}
function carryOn() {
if(stopClick == true) anim();
stopClick = false;
}
