dynamische webprogrammierung mit der googlemaps api
Post on 18-Jan-2015
1.394 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related