• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Dynamische Webprogrammierung mit der GoogleMaps API
 

Dynamische Webprogrammierung mit der GoogleMaps API

on

  • 1,806 views

Script Year 2009

Script Year 2009

Statistics

Views

Total Views
1,806
Views on SlideShare
1,805
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Dynamische Webprogrammierung mit der GoogleMaps API Dynamische Webprogrammierung mit der GoogleMaps API Presentation Transcript

    • Dynamische Webprogrammierung mit der Google Maps API
      Hochschule Wismar - Multimediatechnik
      1
    • 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
    • Vorbereitung
      Hochschule Wismar - Multimediatechnik
      3
    • 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
    • Unsere erste Google Map
      Hochschule Wismar - Multimediatechnik
      5
    • 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
    • Unsere erste Google Map
      Unserer Code
      Das Ergebnis …
      Hochschule Wismar - Multimediatechnik
      7
    • 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
    • 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
    • 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
    • Google Maps designen
      Hochschule Wismar - Multimediatechnik
      11
      Beispiel für Polygon
      Beispiel Polyline
    • Google Maps designen
      Beispiel Marker
      Hochschule Wismar - Multimediatechnik
      12
    • 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
    • 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
    • Dynamische Maps – Datenformat XML
      Grundvoraussetzung bei der Arbeit mit XML Dateien: validierte XML -> DTD und XML
      DTD
      XML
      Hochschule Wismar - Multimediatechnik
      15
    • 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
    • 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
    • Ü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