Google Maps Einbindung

Allgemeines zu Google Maps Kartenerstellung

"Hallo Welt" für Google Maps
Geografische Breiten- und Längenangaben
Kartenattribute
Interaktion mit Karten
Infofenster

Einführung

Das grundlegende Element jeder Google Maps-API-Anwendung ist die "Karte" selbst. In diesem Dokument werden die Verwendung des grundlegenden GMap2 Objekts und einfache Kartenoperationen erklärt.

"Hallo Welt" für Google Maps

Anhand eines einfachen Beispiels erhalten Sie am leichtesten einen Einstieg in das Google Maps-API. Auf der folgenden Webseite wird eine Karte der Größe 500 x 300 mit dem Mittelpunkt Palo Alto, Kalifornien, angezeigt:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript"></script>
<script type="text/javascript"> function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

Sie können sich dieses Beispiel anschauen und herunterladen und damit experimentieren. Sie müssen lediglich den Schlüssel der Datei durch Ihren eigenen Maps-API-Schlüssel ersetzen. Wenn Sie einen Schlüssel für ein bestimmtes Verzeichnis registrieren, gilt er auch für alle Unterverzeichnisse.

Auch für dieses einfache Beispiel müssen folgende fünf Schritte ausgeführt werden:

1. Wir fügen Maps-API-JavaScript mithilfe eines script-Tags hinzu.

2. Wir erstellen das div-Element "map_canvas", in dem die Karte abgelegt wird.

3. Wir schreiben eine JavaScript-Funktion, um ein Kartenobjekt zu erstellen.

4. Wir zentrieren die Karte auf einen bestimmten geografischen Punkt.

5. Wir initialisieren das Kartenobjekt über dasonLoad-Ereignis des body-Tags.

Diese Schritte sind im Folgenden beschrieben.

Google Maps-API laden

Die URL http://maps.google.com/maps?file=api&v=2&key=abcdefg zeigt auf den Speicherort der JavaScript-Datei, die alle Symbole und Definitionen enthält, die Sie für die Verwendung des Google Maps-API benötigen. Ihre Seite muss ein script-Tag enthalten, das auf diese URL zeigt und hierbei den Schlüssel verwendet, den Sie bei Ihrer API-Anmeldung erhalten haben. In diesem Beispiel wird der Schlüssel durch die Zeichenfolge abcdefg dargestellt.

Beachten Sie, dass wir ebenfalls einen sensor-Parameter übergeben, um anzugeben, ob diese Anwendung einen Sensor verwendet, um den Standort des Benutzers zu bestimmen. Wie haben bei diesem Beispiel bewusst die Variable true_or_false beibehalten, um zu betonen, dass Sie diesen Wert auf true oder false setzten müssen.

DOM-Kartenelemente

zurück zum Start

Damit die Karte auf einer Webseite angezeigt werden kann, muss zunächst ein Platz für sie reserviert werden. In der Regel geschieht dies, indem ein benanntes div-Element erstellt und eine Referenz zu diesem Element im Document Object Model (DOM) des Browsers abgerufen wird.

Im obigen Beispiel definieren wir ein div namens "map_canvas" und legen dessen Größe mithilfe von Stilattributen fest. Sofern Sie anhand von GMapOptions nicht ausdrücklich eine Größe für die Karte im Konstruktor festlegen, verwendet die Karte implizit die Größe des Containers zur Bestimmung der eigenen Größe.

GMap2 - das grundlegende Objekt zurück zum Start

var map = new GMap2(document.getElementById("map_canvas"));

> Die JavaScript-Klasse, die die Karte repräsentiert, ist die Klasse GMap2. Die Objekte dieser Klasse definieren eine einzelne Karte auf einer Seite. (Es ist möglich, mehrere Instanzen dieser Klasse zu erstellen – in diesem Falls definiert jedes Objekt eine separate Karte auf der Seite.) Mit dem JavaScript-Operator new erstellen wir eine neue Instanz dieser Klasse. Wenn Sie eine neue Karteninstanz erstellen, geben Sie einen DOM-Knoten der Seite (in der Regel ein div-Element) als Container für die Karte an. HTML-Knoten sind untergeordnete Objekte des JavaScript-Objekts document. Eine Referenz zu diesem Element wird über die Methode document.getElementById() hergestellt. Dieser Code definiert eine Variable (namens map) und weist diese Variable einem neuen GMap2-Objekt zu. Bei der Funktion GMap2() handelt es sich um einen Konstruktor mit der Definition (Kurzfassung aus der Google Maps-API-Referenz):

Konstruktor	Beschreibung
`GMap2(container, opts?)`	Erstellt eine neue Karte in einem vorhandenen HTML-container, bei dem es sich üblicherweise um ein DIV-Element handelt. Sie können dem Parameter opts auch optionale Parameter vom Typ GMap2Options übergeben.

Da JavaScript eine Sprache ohne Typisierungszwang ist, müssen keine optionalen Parameter im Konstruktor übergeben werden, was in diesem Fall auch nicht getan wird.
Karte initialisieren zurück zum Start

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Wenn die Karte mit dem GMap2-Konstruktor erstellt wurde, muss noch ein weiterer Schritt durchgeführt werden: die Initialisierung. Diese Initialisierung erfolgt mithilfe der Methode setCenter() der Karte. Die Methode setCenter() erfordert eine GLatLng-Koordinate und eine Zoomstufe. Diese Methode muss gesendet werden, bevor andere Operationen auf der Karte ausgeführt werden, einschließlich der Einstellung anderer Attribute der Karte.
Karte laden zurück zum Start

Beim Rendern einer HTML-Seite wird das Document Object Model (DOM) ausgebaut und alle externen Bilder und Skripts werden abgerufen und in das document-Objekt eingebunden. Damit sichergestellt wird, dass die Karte erst nach dem vollständigen Ladevorgang auf die Seite platziert wird, führen wir die Funktion, die das GMap2-Objekt erzeugt, erst aus, wenn das <body>-Element der HTML-Seite ein onload-Ereignis empfängt. Auf diese Weise tritt kein unvorhersehbares Verhalten auf und wir haben mehr Kontrolle darüber, wie und zu welchem Zeitpunkt die Karte dargestellt wird. Das onload-Attribut ist ein Beispiel für einen Ereignis-Handler. Das Google Maps-API bietet außerdem zahlreiche Ereignisse, die Sie auf Statusänderungen hin überwachen können. Weitere Informationen hierzu finden Sie im Abschnitt Kartenereignisse und Event-Listener. Die GUnload()-Funktion ist eine Dienstfunktion, die zur Verhinderung von Speicherlecks dient.

Geografische Breiten- und Längenangaben

zurück zum Start

Nun haben wir eine Karte, aber wir müssen noch einen Weg finden, um auf die Orte auf der Karte verweisen zu können. Das GLatLng-Objekt bietet einen solchen Mechanismus innerhalb des Google Maps-API. Sie konstruieren ein GLatLng-Objekt und übergeben dabei seine Parameter in der in der Kartografie üblichen Reihenfolge { Breite, Länge }:

var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)

Hinweis: Der Vorgang, eine Adresse in einen geografischen Punkt zu konvertieren, wird als Geokodierung bezeichnet. Nähere Informationen dazu finden Sie im Abschnitt Google Maps-API-Services.

Genauso nützlich wie die einfache Referenzierung eines geografischen Punktes ist die Definition der geografischen Grenzen eines Objekts. Beispielsweise zeigt eine Karte einen aktuellen Ausschnitt der Erde innerhalb des so genannten Darstellungsbereichs an. Der Darstellungsbereich kann über seine Eckpunkte als Rechteck definiert werden. Das GLatLngBounds-Objekt bietet diese Funktionalität. Mit Hilfe zweier GLatLng-Objekte, die die Südwest- und die Nordostecke der Ansichtsbegrenzung angeben, definiert es einen rechteckigen Bereich.

Innerhalb des Google Maps-API gibt es eine ganze Reihe von Verwendungsmöglichkeiten für GLatLng-Objekte. Das GMarker-Objekt beispielsweise übernimmt eine GLatLng-Angabe in seinem Konstruktor und platziert auf der Karte an der angegebenen geografischen Position ein Markierungs-Overlay.

Im folgenden Beispiel wird getBounds() verwendet, um zum aktuellen Darstellungsbereich zurückzukehren. Anschließend werden nach dem Zufallsprinzip 10 Markierungen innerhalb dieser Grenzen auf der Karte platziert:

function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}

Beispiel anzeigen

Hinweis: Weitere Informationen zu GMarker-Objekten finden Sie im Abschnitt Overlays.

Kartenattribute

zurück zum Start

Normalerweise sind die im Google Maps-API angezeigten Karten in standardisierte Kacheln unterteilt. Das Google Maps-API unterstützt jedoch auch andere Kartentypen. Im Folgenden sin

d die Standard-Kartentypen aufgeführt:

• G_NORMAL_MAP - die Standardansicht

• G_SATELLITE_MAP - Google Earth-Satellitenbilder

• G_HYBRID_MAP - eine Mischung aus der normalen und der Satellitenansicht

• G_DEFAULT_MAP_TYPES - Ein Array aus den drei Typen – nützlich für die iterative Verarbeitung

Mit der setMapType()-Methode des GMap2 Objekts können Sie den Kartentyp einstellen. Das folgende Codebeispiel stellt die Satellitenansicht von Google Earth für die Karte ein:

var map = new GMap2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);

Zu jeder Karte gehört außerdem eine ganze Reihe von Attributen, die man kennen sollte. Die getBounds()-Methode des GMap2-Objekts verwenden Sie beispielsweise, um den GLatLngBounds-Wert abzurufen.

Außerdem enthält jede Karte die Zoomstufe, die die Auflösung der aktuellen Ansicht definiert. In der normalen Kartenansicht sind Zoomstufen zwischen 0 (die niedrigste Zoomstufe, bei der der Globus vollständig angezeigt wird) und 19 (die höchste Zoomstufe, bei der einzelne Gebäude zu sehen sind) möglich. Die Zoomstufen hängen von dem Gelände ab, das Sie betrachten. In bestimmten Regionen der Erde sind die Daten weniger genau als in anderen. In der Satellitenansicht sind Zoomstufen von 0 bis 20 möglich.

Mit der getZoom()-Methode des GMap2-Objekts können Sie die aktuelle Zoomstufe der Karte abrufen.

Weitere Informationen zu Zoomstufen, Kartenkacheln, und zur Erstellung individueller Kartentypen finden Sie im Abschnitt Kachel-Overlays.

Interaktion mit Karten

zurück zum Start

Nun können Sie mit dem soeben erstellten GMap2-Objekt interagieren. Das einfache Kartenobjekt ähnelt in Darstellung und Verhalten sehr der Karte, mit der Sie auf der Google Maps-Website interagieren, und es verfügt über ein umfangreiches integriertes Verhalten. Das GMap2-Objekt bietet außerdem eine Reihe von Konfigurationsmethoden, mit denen das Verhalten des Kartenobjekts geändert werden kann.

Die Kartenobjekte reagieren auf Nutzeraktivitäten standardmäßig so wie unter http://maps.google.com. Sie können dieses Verhalten jedoch mithilfe zahlreicher Dienstmethoden ändern. Die GMap2.disableDragging()-Methode deaktiviert beispielsweise die Fähigkeit, die Karte per Drag & Drop an eine neue Position zu ziehen.

Sie können die Karte auch per Programmierung ansprechen. Das GMap2-Objekt unterstützt eine Reihe von Methoden, mit der man den Kartenstatus direkt ändern kann. Beispiele dafür sind die Methoden setCenter(), panTo und zoomIn(), die anstelle einer Benutzerinteraktion die Karte programmatisch beeinflussen.

Im folgenden Beispiel wird eine Karte angezeigt, , mit drücken des Move-Buttons wird ein neuer Mittelpunkt zentriert. Die panTo-Methode zentriert die Karte an einem bestimmten Punkt. Befindet sich dieser Punkt bereits im sichtbaren Bereich der Karte, wird der Punkt mit einer gleichmäßigen Bewegung angesteuert. Andernfalls "springt" die Karte zu dem Punkt.

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
window.setTimeout(function() {
map.panTo(new GLatLng(37.4569, -122.1569));
}, 1000);

Beispiel anzeigen

Komplexere Interaktionen erfolgen mithilfe von Maps-API-Ereignissen.

Infofenster

zurück zum Start

Für jede Karte innerhalb des Google Maps-API kann ein einzelnes "Infofenster" vom Typ GInfoWindow angezeigt werden. Dabei handelt es sich um ein frei verschiebbares Fenster oberhalb der Karte, das HTML-Inhalte enthält. Das Infofenster hat die Form einer Sprechblase. Es besteht aus einem Inhaltsbereich und einer Spitze, die auf einen bestimmten Punkt auf der Karte zeigt. Sie können ein Infofenster in Aktion sehen, wenn Sie in Google Maps auf eine Markierung klicken.

Das GInfoWindow-Objekt hat keinen Konstruktor. Beim Erstellen der Karte wird automatisch ein Infofenster erstellt und an die Karte angehängt. Es können nicht mehrere Infofenster gleichzeitig angezeigt werden, aber Sie können das Infofenster verschieben und seinen Inhalt bei Bedarf anpassen.

Das GMap2-Objekt bietet die Methode openInfoWindow() mit einem geografischen Punkt und einem HTML-DOM-Element als Argumente an. Das HTML-DOM-Element wird an den Infofenster-Container angehängt und die Spitze des Infofensters wird an dem angegebenen Punkt verankert.

Die openInfoWindowHtml()- Methode von GMap2 ist ähnlich, lediglich wird als zweites Argument anstelle eines DOM-Elements ein HTML-String verwendet.

Um ein Infofenster zu erstellen, rufen Sie die openInfoWindow-Methode auf, der Sie eine Position und das anzuzeigende DOM-Element übergeben haben. Der folgende Beispielcode zeigt ein im Mittelpunkt der Karte verankertes Infofenster mit der einfachen Meldung "Hallo Welt" an.

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));