dpsg Webmaster Convention 2010 - GMaps API

Post on 18-Dec-2014

358 views 0 download

description

 

Transcript of dpsg Webmaster Convention 2010 - GMaps API

Der PfadFinderNutzung der Google Maps 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

Die Google Maps API Familie

Die Google Maps API Familie

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

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

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<

Die erste Karte erstellen

Die erste Karte

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.

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

Geocodierung Beispiel

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

Zentriert die Karte auf diesen Punkt

Was geht noch?

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

der Karte Punkten auf der Karte Linien und Polygonen

Bsp. für Anpassung der Karte

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

map.setMapTypeId('satellite');

Schaltet die Satellitenansicht der Karte ein

Bsp. Punkte auf der Karte

Setzen eines Punktes geschieht mit Hilfe des Marker-Objekts

Bsp. Punkte auf der Karte

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

des Polygon-Objektes:

Bsp. Polygon auf der Karte

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)

Anwendung ruhrsau.de

Setzen von Markern mit eigenem Icon

Anwendung ruhrsau.de

Hinzufügen eines Infofensters

Anwendung ruhrsau.de

Setzen des Mittelpunkts und Zoom in Karte

Mashups

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

Zwei Beispiele: KartaMetro AIR TRAFFIC

KartaMetro

http://kartametro.info/karta/

AIR TRAFFIC

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