Script Year 2009

1. Dynamische Webprogrammierung mit der Google Maps API Hochschule Wismar - Multimediatechnik 1

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 2

3. Vorbereitung Hochschule Wismar - Multimediatechnik 3

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 4

5. Unsere erste Google Map Hochschule Wismar - Multimediatechnik 5

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 6

7. Unsere erste Google Map Unserer Code Das Ergebnis … Hochschule Wismar - Multimediatechnik 7

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 8

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 9

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 10

11. Google Maps designen Hochschule Wismar - Multimediatechnik 11 Beispiel für Polygon Beispiel Polyline

12. Google Maps designen Beispiel Marker Hochschule Wismar - Multimediatechnik 12

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 13

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 14

15. Dynamische Maps – Datenformat XML Grundvoraussetzung bei der Arbeit mit XML Dateien: validierte XML -> DTD und XML DTD XML Hochschule Wismar - Multimediatechnik 15

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 16

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 17

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 Hochschule Wismar - Multimediatechnik 18