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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…