Dynamische Webprogrammierung mit der GoogleMaps API

Hochschule Wismar - Multimediatechnik

1

Dynamische Webprogrammierung mit

der Google Maps API

Hochschule Wismar - Multimediatechnik

2

Vorbereitung

• Schlüssel für die API beantragen (www.google.de -> Maps -> Anmelden)

• Voraussetzung: GoogleMail-Account• Key ist immer Domaingebunden• Testscript laden• Wichtig: Web-Server finden, der Google-Anfragen nicht

blockiert (weder Transmit noch Recieve)

Hochschule Wismar - Multimediatechnik

3

Vorbereitung

Hochschule Wismar - Multimediatechnik

4

Unsere erste Google Map

• Ziel:– Eine Karte– Zentrum der Karte ist Hochschule Wismar– Marker mit einer Erklärung

• Reihenfolge– Erstellen einer normalen HTML-Seite– Einbinden des Google Maps Scripts (API-include)– Definieren eines Containers (<div>) im Body mit einer ID und setzen

der onload/onunload-Funktion

Hochschule Wismar - Multimediatechnik

5

Unsere erste Google Map

Hochschule Wismar - Multimediatechnik

6

Unsere erste Google Map

• Weitere Reihenfolge:– JavaScript schreiben

• Init-Funktion schreiben• Diverse Google-Funktionen implementieren …

• Google-Funktionen:– Erstellen von Objekten (GoogleMaps ist eine OOL) GMap2;

GClientGeocoder; GLatLng (!!)– Anfrage-Funktionen (z.B. geocoder.getLatLng() ) aufrufen und (wichtig)

auf Antwort von Google warten– In der Callback-Funktion Reaktion ausführen

Hochschule Wismar - Multimediatechnik

7

Unsere erste Google Map

• Unserer Code• Das Ergebnis …

Hochschule Wismar - Multimediatechnik

8

Kleiner Theorie-Einschub

Der Geocoder

• Erzeugung eines Geocoders• Übergabe einer Adresse• Da Asynchroner Bearbeitungsmodus Notwendigkeit des

Wartens auf eine Antwort• Daher: Überwachung des Nachrichtenpuffers über

EventListener, bis Antwort da• Antwort gibt Aufschluss über Status der Abfrage

– Wenn Antwort==0 Falsche Anfrage, nicht verzeichneter Ort, ungenaue Anfrage

– Andernfalls: Rückgabe des WAHRSCHEINLICH gesuchten Ortes (unscharfe Suche)

Hochschule Wismar - Multimediatechnik

9

Kl. Erweiterungen

• Anzeige des Infofensters nach einem Klick ( siehe hier)

• Hinzufügen von Steuerfeldern ( siehe hier)

• Design des Infofensters und Strukturierung des Dokuments ( siehe hier)

Hochschule Wismar - Multimediatechnik

10

Google Maps designen

• Verschiedene Möglichkeiten, das Design anzupassen• 1. Texturelle Ausgabe um die eigentliche Karte per

Container-Verschachtelung etc. designen ( CSS)• 2. Formatierung und Design des Info-Fensters von Markern• 3. eigenes Design von Markern• 4. einbinden von AJAX in das Info-Fenster• 5. Diverse Visualisierungsmöglichkeiten von:

– Straßen (GDirections)– Strecken (GPolyline)– Gebieten (GPolygon)

• Dabei wichtig: Google-eigene Design-Formatierung beachten

Hochschule Wismar - Multimediatechnik

11

Google Maps designen

Beispiel für Polygon

Beispiel Polyline

Hochschule Wismar - Multimediatechnik

12

Google Maps designen

Beispiel Marker

Hochschule Wismar - Multimediatechnik

13

Mehrere Marker – erst einmal statisch …

• Übergabe von mehreren Parametern (zum Beispiel 4 für 4 Plätze)

• Umschreiben der JavaScript-Routine• Hinter einander geokodieren der verschiedenen Adressen• Abspeichern der Werte in eigenen Variablen• Setzen des Overlays

Das Ergebnis:

Soweit, so gut … sieht doch schon brauchbar aus

Hochschule Wismar - Multimediatechnik

14

Dynamische Maps – Einleitung Technik

• Dynamik: Darzustellende Daten werden beim Aufruf der Seite erst generiert

• in unserem Fall: Koordinaten der darzustellenden Punkte werden erst beim Aufruf der Seite generiert; Möglichkeit des Hinzufügens von Punkten

• Dazu nötig: ein „Ort“, wo darzustellende Orte abgespeichert werden

• Für kleine und mittlere Webprojekte bestes Datenformat: XML

• Notwendigkeit der dynamischen Übersetzung der Orte in Geo-Koordinaten bei Seitenaufruf PHP

• Da Google Maps an sich eine JS-API: dynamischer Aufbau eines JavaScripts mit Hilfe von PHP

Hochschule Wismar - Multimediatechnik

15

Dynamische Maps – Datenformat XML

• Grundvoraussetzung bei der Arbeit mit XML Dateien: validierte XML -> DTD und XML

• DTD

• XML

Hochschule Wismar - Multimediatechnik

16

Dynamische Maps - Datengenerierung

• Nächster Schritt: Parsen der Geo-Koordinaten zu den eingetragenen Punkten

• Bearbeitung der Daten durch PHP-Script• Sinn eines Scripts: Zusammenführen von Funktionen zur

Datenbearbeitung; keine Bildschirmausgabe• In der späteren Webseite: einfaches <? Include() ?> des

Scripts, damit die Daten bei Seitenaufruf aktualisiert werden

• Unser Script:

Hochschule Wismar - Multimediatechnik

17

Dynamische Maps – Datenabruf und JS-Generierung

• Aufbau der Hauptseite wie gewohnt• Include des PHP-Scripts nicht vergessen !!• Dynamische Generierung des JavaScripts über echo-

Ausgabe per PHP• Per foreach-Schleife werden die einzelnen Einträge der XML

durchgegangen• Per ID werden je XML-Eintrag eigene GoogleMaps-Objekte

generiert

• Quelltext• Anzeige

Hochschule Wismar - Multimediatechnik

18

Überblick der Konkurrenz

• VirtualEarth als Microsoft Konkurrennzprodukt• http://www.woistdaniel.de/• möglich: 3D-Animation der Umgebung

• Voraussetzung für Nutzung von VirtualEarth:– Evtl. Hotmail/MSN-Account– Silverlight SDK– Da Silverlight .NET-Anwendung: .NET 2.0 SDK (mindestens)– Für 3D: Virtual Earth 3D Plugin