dpsg Webmaster Convention 2010 - GMaps API

24
Der PfadFinder Nutzung der Google Maps API

description

 

Transcript of dpsg Webmaster Convention 2010 - GMaps API

Page 1: dpsg Webmaster Convention 2010 - GMaps API

Der PfadFinderNutzung der Google Maps API

Page 2: dpsg Webmaster Convention 2010 - GMaps API

Was ist eine API?

"Eine Programmierschnittstelle ist ein Programmteil, der von einem Softwaresystem anderen

Programmen zur Anbindung an das System zur Verfügung gestellt wird.

Oft wird dafür die Abkürzung API (engl. application programming interface, dt. „Schnittstelle zur Anwendungsprogrammierung“) verwendet.

Im Gegensatz zu einer Binärschnittstelle (ABI) definiert eine API nur die Programmanbindung

auf Quelltextebene." - Wikipedia

Page 3: dpsg Webmaster Convention 2010 - GMaps API

Die Google Maps API Familie

Page 4: dpsg Webmaster Convention 2010 - GMaps API

Die Google Maps API Familie

Zu finden unter: http://code.google.com/intl/de-DE/apis/maps/

Page 5: dpsg Webmaster Convention 2010 - GMaps API

Die Google Maps JS API

ermöglicht die Einbindung von Karten in eine Webseite mittels objektorientiertem JavaScript

bietet zahlreiche Funktionen um Karten anzupassen und mit zusätzlichen Inhalten zu ergänzen

aktuelle Version 3.0 – Im Vergleich zu Vorgängerversionen hinsichtlich verkürzter Ladezeiten konzipiert

Page 6: dpsg Webmaster Convention 2010 - GMaps API

Nutzung der API

Für die Versionen vor 3.0 galt: Zur Nutzung ist ein Schlüssel

notwendig, dieser ist an die Domain gebunden

Der Schlüssel kann über ein Webformular generiert werden

Ein Google-Account ist Voraussetzung

Jetzt kann es direkt losgehen. <|;-)>o<

Page 7: dpsg Webmaster Convention 2010 - GMaps API

Die erste Karte erstellen

Page 8: dpsg Webmaster Convention 2010 - GMaps API

Die erste Karte

Page 9: dpsg Webmaster Convention 2010 - GMaps API

Geokoordinaten

Latitude und Longitude sind die geografische

Breite bzw. geographische Länge eines Punktes auf der Erde. Durch sie wird die Lage südlich oder nördlich des Äquators bzw. westlich oder östlich des Nullmeridians angegeben angegeben. Die Wertebereich sind im Bereich von –90°(südlich) bis +90°(nördlich) und –180°(westlich) bis +180°(östlich) .

Die Google Maps API arbeitet mit diesen Koordinaten in Form eines LatLng-Objektes, welches die beiden Werte in dezimaler Form kapselt.

Page 10: dpsg Webmaster Convention 2010 - GMaps API

GeoCodierung

Geocodierung ist der Vorgang der Konvertierung von Adressen in geografische Koordinaten

Über das google.maps.Geocoder-Objekt stellt die API einen Geocodierungsservice zur Verfügung

Page 11: dpsg Webmaster Convention 2010 - GMaps API

Geocodierung Beispiel

Ermittelt die Koordinaten der Rolandstraße 61 in Köln

Zentriert die Karte auf diesen Punkt

Page 12: dpsg Webmaster Convention 2010 - GMaps API

Was geht noch?

Die API bietet eine Fülle an Funktionen für die Anpassung …

der Karte Punkten auf der Karte Linien und Polygonen

Page 13: dpsg Webmaster Convention 2010 - GMaps API

Bsp. für Anpassung der Karte

Über die Methode setMapTypeId() kann der Kartentyp festegelegt werden.

map.setMapTypeId('satellite');

Schaltet die Satellitenansicht der Karte ein

Page 14: dpsg Webmaster Convention 2010 - GMaps API

Bsp. Punkte auf der Karte

Setzen eines Punktes geschieht mit Hilfe des Marker-Objekts

Page 15: dpsg Webmaster Convention 2010 - GMaps API

Bsp. Punkte auf der Karte

Page 16: dpsg Webmaster Convention 2010 - GMaps API

Bsp. Polygon auf der Karte Das Hinzufügen eines Polygon-Overlays geschieht mit Hilfe

des Polygon-Objektes:

Page 17: dpsg Webmaster Convention 2010 - GMaps API

Bsp. Polygon auf der Karte

Page 18: dpsg Webmaster Convention 2010 - GMaps API

Anwendung ruhrsau.de

Webseite der DPSG Bezirk Ruhr-Sauerland

Noch auf Basis der Version 2.0 der API

Funktionen Setzen von Markernmit eigenem Icon Hinzufügen eines Infofensters Setzen des Mittelpunkts und Zoom in

Karte Routenplaner (keine API-Funktion)

Page 19: dpsg Webmaster Convention 2010 - GMaps API

Anwendung ruhrsau.de

Setzen von Markern mit eigenem Icon

Page 20: dpsg Webmaster Convention 2010 - GMaps API

Anwendung ruhrsau.de

Hinzufügen eines Infofensters

Page 21: dpsg Webmaster Convention 2010 - GMaps API

Anwendung ruhrsau.de

Setzen des Mittelpunkts und Zoom in Karte

Page 22: dpsg Webmaster Convention 2010 - GMaps API

Mashups

Anwendungen, die Daten aus anderer Quelle in einer Google Maps Ansicht integrieren

Zwei Beispiele: KartaMetro AIR TRAFFIC

Page 23: dpsg Webmaster Convention 2010 - GMaps API

KartaMetro

http://kartametro.info/karta/

Page 24: dpsg Webmaster Convention 2010 - GMaps API

AIR TRAFFIC

http://radar.zhaw.ch/radar.html