Dynamische Webprogrammierung mit der Google Maps API<br />Hochschule Wismar - Multimediatechnik<br />1<br />
Vorbereitung<br />Schlüssel für die API beantragen (www.google.de -> Maps -> Anmelden)<br />Voraussetzung: GoogleMail-Acco...
Vorbereitung<br />Hochschule Wismar - Multimediatechnik<br />3<br />
Unsere erste Google Map<br />Ziel:<br />Eine Karte<br />Zentrum der Karte ist Hochschule Wismar<br />Marker mit einer Erkl...
Unsere erste Google Map<br />Hochschule Wismar - Multimediatechnik<br />5<br />
Unsere erste Google Map<br />Weitere Reihenfolge:<br />JavaScript schreiben<br />Init-Funktion schreiben<br />Diverse Goog...
Unsere erste Google Map<br />Unserer Code<br />Das Ergebnis …<br />Hochschule Wismar - Multimediatechnik<br />7<br />
Kleiner Theorie-Einschub<br />Der Geocoder<br />Erzeugung eines Geocoders<br />Übergabe einer Adresse<br />Da Asynchroner ...
Kl. Erweiterungen<br />Anzeige des Infofensters nach einem Klick ( siehe hier)<br />Hinzufügen von Steuerfeldern ( siehe...
Google Maps designen<br />Verschiedene Möglichkeiten, das Design anzupassen<br />1. Texturelle Ausgabe um die eigentliche ...
Google Maps designen<br />Hochschule Wismar - Multimediatechnik<br />11<br />Beispiel für Polygon<br />Beispiel Polyline<b...
Google Maps designen<br />Beispiel Marker<br />Hochschule Wismar - Multimediatechnik<br />12<br />
Mehrere Marker – erst einmal statisch …<br />Übergabe von mehreren Parametern (zum Beispiel 4 für 4 Plätze)<br />Umschreib...
Dynamische Maps – Einleitung Technik<br />Dynamik: Darzustellende Daten werden beim Aufruf der Seite erst generiert<br />...
Dynamische Maps – Datenformat XML<br />Grundvoraussetzung bei der Arbeit mit XML Dateien: validierte XML -> DTD und XML<br...
Dynamische Maps - Datengenerierung<br />Nächster Schritt: Parsen der Geo-Koordinaten zu den eingetragenen Punkten<br />Bea...
Dynamische Maps – Datenabruf und JS-Generierung<br />Aufbau der Hauptseite wie gewohnt<br />Include des PHP-Scripts nicht ...
Überblick der Konkurrenz<br />VirtualEarth als Microsoft Konkurrennzprodukt<br />http://www.woistdaniel.de/<br />möglich: ...
Nächste SlideShare
Wird geladen in …5
×

Dynamische Webprogrammierung mit der GoogleMaps API

1.753 Aufrufe

Veröffentlicht am

Script Year 2009

Veröffentlicht in: Bildung, Technologie, Business
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.753
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Dynamische Webprogrammierung mit der GoogleMaps API

  1. 1. Dynamische Webprogrammierung mit der Google Maps API<br />Hochschule Wismar - Multimediatechnik<br />1<br />
  2. 2. Vorbereitung<br />Schlüssel für die API beantragen (www.google.de -> Maps -> Anmelden)<br />Voraussetzung: GoogleMail-Account<br />Key ist immer Domaingebunden<br />Testscript laden<br />Wichtig: Web-Server finden, der Google-Anfragen nicht blockiert (weder Transmit noch Recieve)<br />Hochschule Wismar - Multimediatechnik<br />2<br />
  3. 3. Vorbereitung<br />Hochschule Wismar - Multimediatechnik<br />3<br />
  4. 4. Unsere erste Google Map<br />Ziel:<br />Eine Karte<br />Zentrum der Karte ist Hochschule Wismar<br />Marker mit einer Erklärung<br />Reihenfolge<br />Erstellen einer normalen HTML-Seite<br />Einbinden des Google Maps Scripts (API-include)<br />Definieren eines Containers (<div>) im Body mit einer ID und setzen der onload/onunload-Funktion<br />Hochschule Wismar - Multimediatechnik<br />4<br />
  5. 5. Unsere erste Google Map<br />Hochschule Wismar - Multimediatechnik<br />5<br />
  6. 6. Unsere erste Google Map<br />Weitere Reihenfolge:<br />JavaScript schreiben<br />Init-Funktion schreiben<br />Diverse Google-Funktionen implementieren …<br />Google-Funktionen:<br />Erstellen von Objekten (GoogleMaps ist eine OOL)  GMap2; GClientGeocoder; GLatLng (!!)<br />Anfrage-Funktionen (z.B. geocoder.getLatLng() ) aufrufen und (wichtig) auf Antwort von Google warten<br />In der Callback-Funktion Reaktion ausführen<br />Hochschule Wismar - Multimediatechnik<br />6<br />
  7. 7. Unsere erste Google Map<br />Unserer Code<br />Das Ergebnis …<br />Hochschule Wismar - Multimediatechnik<br />7<br />
  8. 8. Kleiner Theorie-Einschub<br />Der Geocoder<br />Erzeugung eines Geocoders<br />Übergabe einer Adresse<br />Da Asynchroner Bearbeitungsmodus  Notwendigkeit des Wartens auf eine Antwort<br />Daher: Überwachung des Nachrichtenpuffers über EventListener, bis Antwort da<br />Antwort gibt Aufschluss über Status der Abfrage<br />Wenn Antwort==0  Falsche Anfrage, nicht verzeichneter Ort, ungenaue Anfrage<br />Andernfalls: Rückgabe des WAHRSCHEINLICH gesuchten Ortes (unscharfe Suche)<br />Hochschule Wismar - Multimediatechnik<br />8<br />
  9. 9. Kl. Erweiterungen<br />Anzeige des Infofensters nach einem Klick ( siehe hier)<br />Hinzufügen von Steuerfeldern ( siehe hier)<br />Design des Infofensters und Strukturierung des Dokuments ( siehe hier)<br />Hochschule Wismar - Multimediatechnik<br />9<br />
  10. 10. Google Maps designen<br />Verschiedene Möglichkeiten, das Design anzupassen<br />1. Texturelle Ausgabe um die eigentliche Karte per Container-Verschachtelung etc. designen ( CSS)<br />2. Formatierung und Design des Info-Fensters von Markern<br />3. eigenes Design von Markern<br />4. einbinden von AJAX in das Info-Fenster<br />5. Diverse Visualisierungsmöglichkeiten von:<br />Straßen (GDirections)<br />Strecken (GPolyline)<br />Gebieten (GPolygon)<br />Dabei wichtig: Google-eigene Design-Formatierung beachten<br />Hochschule Wismar - Multimediatechnik<br />10<br />
  11. 11. Google Maps designen<br />Hochschule Wismar - Multimediatechnik<br />11<br />Beispiel für Polygon<br />Beispiel Polyline<br />
  12. 12. Google Maps designen<br />Beispiel Marker<br />Hochschule Wismar - Multimediatechnik<br />12<br />
  13. 13. Mehrere Marker – erst einmal statisch …<br />Übergabe von mehreren Parametern (zum Beispiel 4 für 4 Plätze)<br />Umschreiben der JavaScript-Routine<br />Hinter einander geokodieren der verschiedenen Adressen<br />Abspeichern der Werte in eigenen Variablen<br />Setzen des Overlays<br />Das Ergebnis: <br />Soweit, so gut … sieht doch schon brauchbar aus <br />Hochschule Wismar - Multimediatechnik<br />13<br />
  14. 14. Dynamische Maps – Einleitung Technik<br />Dynamik: Darzustellende Daten werden beim Aufruf der Seite erst generiert<br /> in unserem Fall: Koordinaten der darzustellenden Punkte werden erst beim Aufruf der Seite generiert; Möglichkeit des Hinzufügens von Punkten<br />Dazu nötig: ein „Ort“, wo darzustellende Orte abgespeichert werden<br />Für kleine und mittlere Webprojekte bestes Datenformat: XML<br />Notwendigkeit der dynamischen Übersetzung der Orte in Geo-Koordinaten bei Seitenaufruf  PHP<br />Da Google Maps an sich eine JS-API: dynamischer Aufbau eines JavaScripts mit Hilfe von PHP<br />Hochschule Wismar - Multimediatechnik<br />14<br />
  15. 15. Dynamische Maps – Datenformat XML<br />Grundvoraussetzung bei der Arbeit mit XML Dateien: validierte XML -> DTD und XML<br />DTD<br />XML<br />Hochschule Wismar - Multimediatechnik<br />15<br />
  16. 16. Dynamische Maps - Datengenerierung<br />Nächster Schritt: Parsen der Geo-Koordinaten zu den eingetragenen Punkten<br />Bearbeitung der Daten durch PHP-Script<br />Sinn eines Scripts: Zusammenführen von Funktionen zur Datenbearbeitung; keine Bildschirmausgabe<br />In der späteren Webseite: einfaches <? Include() ?> des Scripts, damit die Daten bei Seitenaufruf aktualisiert werden<br />Unser Script: <br />Hochschule Wismar - Multimediatechnik<br />16<br />
  17. 17. Dynamische Maps – Datenabruf und JS-Generierung<br />Aufbau der Hauptseite wie gewohnt<br />Include des PHP-Scripts nicht vergessen !!<br />Dynamische Generierung des JavaScripts über echo-Ausgabe per PHP<br />Per foreach-Schleife werden die einzelnen Einträge der XML durchgegangen<br />Per ID werden je XML-Eintrag eigene GoogleMaps-Objekte generiert<br />Quelltext<br />Anzeige<br />Hochschule Wismar - Multimediatechnik<br />17<br />
  18. 18. Überblick der Konkurrenz<br />VirtualEarth als Microsoft Konkurrennzprodukt<br />http://www.woistdaniel.de/<br />möglich: 3D-Animation der Umgebung<br />Voraussetzung für Nutzung von VirtualEarth:<br />Evtl. Hotmail/MSN-Account<br />Silverlight SDK<br />Da Silverlight .NET-Anwendung: .NET 2.0 SDK (mindestens)<br />Für 3D: Virtual Earth 3D Plugin<br />Hochschule Wismar - Multimediatechnik<br />18<br />

×