Sicherheit & Internet:Internet:Web-Entwicklung

Teil 3: 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. Die aufgerufene Hilfsfunktion addIcon() stattet die Icons mit den notwendigen Größenangaben aus.

© Archiv

maps-for-free.com zeigt Ihnen, wie Sie eigenes Kartenmaterial einbinden.

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:

© Archiv

Bei www.swisstrains.ch sehen Sie die Position der Züge in Echtzeit.
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;
}

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.