Google-Maps-API 2

Dynamische Karten

Standardkarte

Mit der Google-Maps-JavaScript-API können interaktive Karten in eine Webseite oder Webapplikation eingebunden werden. Die Google-Maps-JavaScript-API wird mit einem Script-Element auf die Webseite eingebunden. Die Karte selbst kann dann mit einem Container-Element (div, section, etc.) dargestellt werden:

Um die Karte zu erstellen wird ein Objekt der Klasse „google.maps.Map“ erzeugt und diesem die ID des Container-Elements, in der die Karte dargestellt werden soll, und ein Objekt mit den Optionen für die Karte übergeben. Für die Positionsangabe in den Optionen muss ein Objekt der Klasse „google.maps.LatLng“ erzeugt werden, dem dann die GPS-Koordinaten übergeben werden kann:

Im folgenden Beispiel wird eine Karte mit Hilfe einer selbstaufrufenden Funktion erstellt und angezeigt:

HTML-Datei:

Ergebnis:

Dem Link zum Einbinden der Google-Maps-JavaScript-API kann aber auch eine sog. Callback-Funktion übergeben werden, die dann automatisch, nach erfolgreichem Einbinden, ausgeführt wird. Dabei muss das Einbinden der Google-Maps-JavaScript-API aber nach der Definition der Callback-Funktion erfolgen:

HTML-Datei:

Ergebnis:

Soll die Karte gleich die eigene Position anzeigen, kann der Code zum Erstellen und Anzeigen der Karate auch in der Callback-Funktion von „getCurrentPosition()“ ausgeführt werden:

HTML-Datei:

Ergebnis:

Die Eigenschaften von Karten können nachträglich mit Hilfe der Methode „setOptions()“ des Karten-Objekts gesetzt und direkt über die Eigenschaften des Karten-Objekts ausgelesen werden:

HTML-Datei:

Ergebnis:

Kartentypen

Der Kartentyp einer Karte kann mit der Eigenschaft „mapTypeId“ des Optionen-Objekts festgelegt werden. Als Wert muss eine der vier Konstanten des Objekts „google.maps“ in der Form „google.maps.MapTypeId.KONSTANTE“ übergeben werden. Dabei gibt es folgende vier Konstanten:

ROADMAP: Straßenkarte (Standard)
TERRAIN: Landschaftskarte
SATELLITE: Satellitenkarte
HYBRID: Satellitenkarte mit Straßen und Plätzen

HTML-Datei:

Ergebnis:

Außerdem kann der Kartentyp zur Laufzeit mit der Methode „setMapTypeID()“ des „map“-Objekts geändert werden:

HTML-Datei:

Ergebnis:

Overlays

Mit der Klasse „google.maps.Marker“ können Marker-Objekte erstellt werden. Das Marker-Objekt kann u. a. folgende Eigenschaften haben:

position: Positionsangaben (in der Form {lat: …, lng: …})
map: Karten-Objekt
title: Tooltip
draggable: ob der Marker angefasst und verschoben werden darf (true und false)
animation: Animationen für den Marker („google.maps.Animation.DROP|BOUNCE“)

Mit der Methode „setMap()“ des Marker-Objekts kann dem Marker eine Karte zugewiesen werden. Außerdem kann mit dem Wert „null“ der Marker von einer Karte entfernt werden:

HTML-Datei:

Ergebnis:

Mit der Eigenschaft „icon“ des Marker-Objekts, kann dem Marker auch ein Bild zugewiesen werden, das anstelle des Standard-Pins dargestellt wird. Google selber bietet auf seinen Servern Icons zum einbinden in Karten an. Das Icon kann auch als Objekt, mit u. a. folgenden Eigenschaften, übergeben werden:

url: URL zum Icon
scaledSize: Prozentuale Größenanpassung

Hinweis: Auf der Seite „http://kml4earth.appspot.com/icons.html“ werden die verschiedenen Icons und Adressen zu den Google-Servern vorgestellt.

HTML-Datei:

Ergebnis:

Mit der Google-Maps-API können außerdem Polylinien, Polygone und Kreise auf Karten dargestellt werden. Dazu werden folgende Klassen der Google-Maps-API verwendet:

google.maps.polyline: Polylinie
google.maps.Polygon: Polygon
google.maps.Circle: Kreis

Die Formen-Objekt können u. a. folgende Eigenschaften haben:

path: Folge von Punkten (nur Polylinien und Polygone)
center: Mittelpunkt (nur Kreise)
radius: Radius (nur Kriese)
strokeColor: Linienfarbe
strokeOpacity: Tranparenz der Linienfarbe
strokeWeight: Linienstärke
fillColor: Füllfarbe (nur Polygone und Kreise)
fillOpacity: Transparenz der Füllfarbe (nur Polygone und Kreise)
map: Karten-Objekt
editable: in seiner Form veränderbar
draggable: in seiner Position veränderbar
geodesic: behält seine geografische Form beim Verschieben bei

Mit der Methode „setMap“ des Formen-Objekts kann das Objekt einer Karte zugewiesen werden. Mit „setMap(null)“ kann die Form von einer Karte entfernt werden:

HTML-Datei:

Ergebnis:

Mit der Klasse „google.maps.InfoWindow“ können Info-Fenster erstellt und auf einer Karte angezeigt werden. Info-Fenster-Objekte können u. a. folgende Eigenschaften haben:

position: Positionsangaben (in der Form {lat: …, lng: …})
content: Text auf dem Info-Fenster

Mit der Methode „open()“ des Info-Fenster-Objekts kann ein Info-Fenster geöffnet werden. Dabei kann dem Info-Fenster zusätzlich ein Marker zugewiesen werden, über dem es geöffnet wird. Mit der Methode „close()“ des Info-Fenster-Objekts kann das Info-Fenster geschlossen werden:

HTML-Datei:

Ergebnis:

Events

Mit der Methode „.addListener(Event, Funktion)“ können sog. Event-Handler Google-Maps-Objekten zugewiesen werden. Dabei sind u. a. folgende Ereignisse möglich:

click: Klick mit der linken Maustaste
dblclick: Doppelklick mit der linken Maustaste
zoom_changed: Veränderung der Zoom-Einstellung der Karte (nur für Karten)
center_changed: Veränderung des Zentrums der Karte (nur für Karten)

HTML-Datei:

Ergebnis:

Controls

Mit den Karten-Controls von Google-Maps können Anwender mit der Karte interagieren. Standardmäßig verwendet Google-Maps folgende Controls:

zoomControl: „+“ und „-“ Button zum Ändern der Zoom-Stufe
mapTypeControl: Dropdown oder horizontale Button zum Ändern des Kartentyps
streetViewControl: gelbes Icon das auf der Karte platziert werden kann, um Street View an der Stelle zu öffnen
fullscreenControl: gestricheltes Viereck am rechten oberen Rand zum Aktivieren oder Deaktivieren der Vollbildansicht

Außerdem können noch folgende zusätzliche Controls angezeigt werden:

scaleControl: zeigt ein Skalierungs-Element am unteren Rand
rotateControl: konnte nicht ermittelt werden!

Die Karten-Controls können beim Erstellen der Karte in den Karten-Optionen oder nachträglich mit der Methode „setOptions()“ des Karten-Objekts aktiviert bzw. deaktiviert werden. Die Standardeinstellungen der Kartenoberfläche können mit „disableDefaultUI: true“ deaktiviert werden:

HTML-Datei: