Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.904 Aufrufe

Veröffentlicht am

Script Year 2009

Veröffentlicht in: Bildung, Technologie, Business
  • Als Erste(r) kommentieren

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

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 />

×