jQuery von Kopf bis Fuß (German Edition)

schreiben. Ist die Google Maps-API trotzdem etwas für mich?
A:
A: Wenn Sie für iOS oder Android entwickeln, ist die Antwort Ja. Google stellt spezielle Frameworks für beide Plattformen zur Verfügung, die Sie zur App-Entwicklung benutzen können. Für andere mobile Plattformen gibt es dagegen noch kein Framework, und Sie müssen den gleichen Code benutzen wie auch für Ihre Website.
F:
F: Die Vollversion von Google Maps hat einen Routenplaner. Kann ich den auch mit der API nutzen?
A:
A: Nein, das geht mit dieser API nicht. Aber es gibt eine andere API mit dem Namen Google Directions API, die Sie für die Routenplanung einsetzen können.
F:
F: Wie sieht es aus, wenn ich Orte auf der Karte nach Adresse finden möchte?
A:
A: In der Szene nennt man das Geo-coding . Dafür gibt es eine weitere API von Google, die Geocoding API. Beide gerade genannten APIs gehören zur Familie der Google Maps-APIs. Ein weiterer Vorteil liegt darin, dass von Google angeforderte Daten im Ihnen bereits bekannten JSON-Format zurückgegeben werden.
F:
F: Welche Dinge gehören noch zur Familie der Google Maps-API?
A:
A: Sowohl die Directions- als auch die Geocoding-API gehören zur Untergruppe mit dem Namen Maps API Web Service. Zu ihr gehören außerdem die Distance API (Entfernung), die Elevation API (Höhe) und die Places API (Orte).
F:
F: Gibt es noch mehr?
A:
A: Ja. Für Browser, die keine vollständige JavaScript-Unterstützung besitzen, gibt es außerdem noch die Static Maps API. Des Weiteren gibt es die Maps API for Flash und sogar eine Earth API, mit der ein Google Earth-Betrachtungsprogramm in Ihre Seite integriert wird. Damit können Sie dreidimensionale Bilder der Erde anzeigen, virtuelle Touren unternehmen und auf das Gelände zeichnen. Für die Google Earth API muss allerdings das Google Earth-Plugin instaliert sein.
F:
F: Gibt es die APIs auch für andere Sprachen neben JavaScript?
A:
A: Ja. Es stehen zahllose APIs zur Verfügung. Einige gibt es kostenlos, andere müssen lizensiert gekauft werden. Wenn Sie eine bestimmte Funktion nicht selbst schreiben möchten, stehen die Chancen gut, dass es bereits eine API dafür gibt.

Karten-Events abfangen
    Wir sind fast am Ende. Sie haben eine Menge jQuery- und JavaScript-Events kennengelernt, mit denen Sie Ihre Webapplikationen noch interessanter und interaktiver machen können. Da die Google Maps-API komplett in (ziemlich guten und effizientem) JavaScript geschrieben ist, kann auch sie die Fähigkeit des Browsers nutzen, auf Events zu »lauschen« und entsprechend zu reagieren.
    Nicht alle Browser handhaben Events auf die gleiche Weise. Daher stellen sowohl jQuery als auch die Google Maps-API eigene Möglichkeiten und Funktionen zum Erstellen von Event-Listenern bereit. So kann im Falle von Google Maps die API kontrollieren, wie die Event-Listener zur Seite hinzugefügt werden. Im Folgenden soll ein Event-Listener für click -Events angelegt werden, der bei Bedarf ein Google Maps-Infofenster (auch InfoWindow genannt) erstellt:

    Freak-Futter
    In der Google Maps-API besitzen fast alle Objekttypen ( Map , Marker , Line , InfoWindow , TrafficOverlay , Polygon und andere) ihre eigenen Events. Aber: Selbst wenn die Events der verschiedenen Objekte den gleichen Namen haben, können sich die Parameter trotzdem unterscheiden! Um Probleme zu vermeiden, sollten Sie im Zweifel auf jeden Fall die Dokumentation für das gewünschte Objekt konsultieren.
    Spitzen Sie Ihren Bleistift
    Ergänzen Sie die fehlenden Codezeilen, um die Funktion
sichtungen_nach_typ_abfragen
zu vervollständigen. Sowohl die Marker als auch die Listeneinträge sollen mit passenden click-Funktionen ausgestattet werden. Legen Sie außerdem eine globale Variable mit den Namen
info_window
an. Sie soll eine neue Instanz des Google Maps-
InfoWindow
-Objekts enthalten. Als Wert für die content-Eigenschaft soll standardmäßig ein leerer String verwendet werden.
    Spitzen Sie Ihren Bleistift: Lösung
    Jetzt ist die Funktion
sichtungen_nach_typ_abfragen
in der Lage, Daten in der Liste und auf der Karte anzuzeigen. Außerdem sind die Marker auf der Karte und die Listeneinträge jetzt anklickbar.
    Probefahrt
    Erweitern Sie Ihre Datei karten.js um den auf der vorigen Seite erstellten Code. Öffnen Sie die Seite typ_anzeigen.html in Ihrem Browser und wählen Sie eine Kreatur aus der Liste aus. Klicken Sie auf die Marker, um sich zusätzliche Informationen zur gewählten Kreatur anzeigen zu lassen.

    Ein Drop-down-Menü mit den möglichen