Elektronische Landkarten am Beispiel der Google Maps API

1. Elektronische Landkarten am Beispiel der Google Maps API Map Objects

2. „Hello World“ – Google Maps API • Voraussetzungen: • Google Maps API Key • HTML Editor und Internet Browser • Quelltext Beispiel und Dokumentation • Struktur: • HTML Seite bildet Rahmen • Karte wird in sog. div-tag eingebunden • Laden der API und Manipulation der Karte über Javascript (clientseitig) • Javascript erlaubt auch Kommunikation mit Server (→ später!)

3. Quelltext Einbindung der Google API vom Server HTML Rahmen In diesen Bereich kommen alle unsere Variablen und Funktionen rein! (script-tag vom Typ Javascript) Definition und Aufruf der Initialisierungsfunktion div-tag enthältKarte inkl. Breite und Höhe

4. Verwendung der Dokumentation HTML: http://html-seminar.de Google Maps API Dokumentation: Start: http://code.google.com/apis/maps/index.html Beispiele: http://code.google.com/apis/maps/documentation/examples/index.html (Firefox: <STRG>+U) Gesamtreferenz: http://code.google.com/apis/maps/documentation/reference.html 4

5. Ordnerstruktur Jede Doppelstunde: eigener Ordner mit Datum (Eigene Dateien). Dort kommen Eure Webseiten, die Präsentationen, etc. hinein. Jede Aufgabe in separater Datei speichern! Jede neue (Teil-)Aufgabe: Hello World und dann: „Speichern unter“ 5

6. Aufgabe (I) • Schreibe mit dem HTML-Editor ein „Hello World“ Bsp. und starte es in Deinem Browser. →Speichern unter • Zentriere die Karte über Reutlingen mit der Funktion: map.setCenter(new GLatLon(…), zoomlevel); • Binde zusätzl. „Map Controls“ ein für: • Zoomin/-out und bewegen nach „North“, „East“, „West“, „South“ • Umschalten zwischen versch. Kartentypen (map types): „Karte“, „Satellit“ und „Hybrid“ • Overview map (Übersichtskarte unten rechts) • Anzeige des Kartenmaßstabs (map scale) • … und weitere!

7. Fehlervermeidung Immer von funktionierendem Quelltext-Beispiel ausgehen Dann „Speichern unter“! Schritt für Schritt erweitern und jedesmal testen Riskante und aufwendige Änderungen: vorher immer „Speichern unter“ 7

8. Aufgabe (II) • Finde die geographischen Koordinaten von Deinem zu Hause und dem AEG mit Hilfe von showcoord.html heraus (siehe Austeilen). • Füge in initialize-Funktion einen Marker über Deinem zu Hause hinzu: var m1 = new GMarker(newGLatLng( lat1,lng1 ) ); map.addOverlay( m1 ); • Füge auch einen Marker über dem AEG ein. Baue einen Tooltip für beide ein, z.B:m1.bindInfoWindowHtml("<div style='color:blue'>Hier wohn ich!</div>" ); • Zentriere Karte: beide Marker gut sichtbar! 8

9. Geographische Koordinaten (I) • Beschreiben einen Punkt auf Karte • Bezugssystem? • WGS 84 (u.a. GPS) • Eindeutig? Wie angeben? • (Latitude, Longitude) • Traditionell: • Grad, Bogenminute, Bogensekunde 9

10. Geographische Koordinaten (II) • 1 Degree = 1° = 60 Minutes = 60‘ und 1‘ = 1 Minute = 60 Seconds = 60‘‘ • Verschiedene Formate für 13 Degree, 22 Minutes, 46 Seconds: • DMS: 13°22‘‘46‘, DecimalDegree: 13,379° • DecimalMinutes: ??? • Google Maps API verwend. DecimalDegree • Abstandsberechnung? Wie??? 10

11. Aufgabe (III) – Marker über Buttons und Funktionen hinzufügen Schreibe zwei Funktionen in Javascript: addHomeMarkerAndCenter addKepiMarkerAndCenter Binde einen HTML-Button „Add Home Marker and Center“ und „Show AEG Marker and Center“ ein. (siehe Tipps) Binde die Funktionen an die entsprechenden Buttons. 11

12. Aufgabe (III) - Tipps • Bsp für JS-Funktion:functionaddMarker(){var m1 = newGMarker( newGLatLng( 49, 9 ) );map.addOverlay( m1 );} • Bsp für HTML-Button:<input id="button_addHomeMarker" type="button" value="Add Home Marker and Center" onclick="addHomeMarkerAndCenter();"/> • Wichtig: map als globale Variable noch vor der initialize-Funktion deklarieren (im script-Element)!!!

13. Aufgabe (III)* • Binde GInfoWindow an Gmarker und verschönere, z.B:m1.bindInfoWindowHtml("<div style='color:blue'>Da wohn ich!</div>"); • Füge Buttons ein, um jeden der (nun globalen) Marker … • … löschen zu können • … unsichtbar machen zu können (hide) • … sichtbar machen zu können (show) • … ins Zentrum der Karte zu bringen • Verwende dazu die Dokumentation von GMarker: http://code.google.com/apis/maps/documentation/reference.html#GMarker 13

14. Häufige Fehler (I) Da „vergessen“ wurde die Karte über bestimmten Koordinaten zu zentrieren, wird erst gar keine Karte angezeigt, sondern einfach nur eine graue Fläche!!! 14

15. Häufige Fehler (II) Die new GMap2(…) wurde nicht der globalen Variablemap, sondern der lokalen Variablemap zugewiesen: Daher ist sie in der function addHomeMarkerAndCenter nicht bekannt! Rot eingekreistes var weglassen! 15

16. Fehlersuche Auskommentieren (in Javascript): Zeile: // Diese Zeile ist auskommentiert Block: /* Dieser Block ist auskommentiert! */ Auskommentieren (in HTML): Block: <!– Dieser Block ist auskommentiert --> Testausgabe alert( “Der Wert der Variablen i ist:“ + i ); 16

17. Binde Eingabefelder für Latitude bzw. Longitude des neuen Markers ein. Binde Button ein, der Funktion zum Hinzufügen der Marker aufruft. Schreibe selbige Funktion. Sie fügt unter Verwendung (Übergabe) der eingegebenen Lat und Lng einen Marker hinzu, sobald der Button gedrückt wurde. Aufgabe (IV) – Neue GMarker über HTML-Eing.felder/-Buttons hinzufg. 17

18. Aufgabe (IV) - Tipps 1. HTML-Eingabefeld (hier für Latitude): <input id="lat_field" type="text" size="40"/> 2. Funktionsaufruf über Button, inkl. Übergabe der Lat- und Lng-Werte, die in beiden Eingabefeldern eingegeben wurden: <input id="button_addMarker" type="button" value="Add Marker" onclick="addMarker( document.getElementById('lat_field').value, document.getElementById('lng_field').value );"/> 18