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.

Google Maps

© 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:

Google Maps

© 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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".