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 HTML Rahmen div-tag enthält Karte inkl. Breite und Höhe Einbindung der Google API vom Server Definition und Aufruf der Initialisierungsfunktion In diesen Bereich kommen alle unsere Variablen und Funktionen rein! (script-tag vom Typ Javascript)

4 Verwendung der Dokumentation HTML: Google Maps API Dokumentation: –Start: –Beispiele: mples/index.html (Firefox: +U) mples/index.html –Gesamtreferenz: rence.html rence.html

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

6 Aufgabe (I) 1.Schreibe mit dem HTML-Editor ein Hello World Bsp. und starte es in Deinem Browser. Speichern unter 2.Zentriere die Karte über Reutlingen mit der Funktion: map.setCenter(new GLatLon(…), zoomlevel); 3.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

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

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

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°2246, Decimal Degree: 13,379° –Decimal Minutes: ??? Google Maps API verwend. Decimal Degree Abstandsberechnung? Wie??? 10

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

12 Aufgabe (III) - Tipps Bsp für JS-Funktion: function addMarker(){ var m1 = new GMarker( new GLatLng( 49, 9 ) ); map.addOverlay( m1 ); } Bsp für HTML-Button: 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( " Da wohn ich! " ); 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: ce.html#GMarker ce.html#GMarker

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!!!

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

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

17 1.Binde Eingabefelder für Latitude bzw. Longitude des neuen Markers ein. 2.Binde Button ein, der Funktion zum Hinzufügen der Marker aufruft. 3.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.

18 Aufgabe (IV) - Tipps 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 );"/> 1. HTML-Eingabefeld (hier für Latitude):