Workshop: GoogleMaps auf der eigenen Website

Kartenmaterial innerhalb einer Website – beispielsweise als Anfahrtsbeschreibung – gehört heute zum Standard jedes professionellen Webauftritts. Wer allerdings meint, er könnte einfach bestehende Stadtpläne einscannen oder Screenshots von Online-Stadtplänen einbinden, verstößt damit gegen das Urheberrecht und kann mit einer Abmahnung rechnen.

Verwendet man stattdessen GoogleMaps, kann das nicht passieren. Mit GoogleMaps bietet Google einen kostenlosen Kartendienst an. Dieser verfügt über eine Javascript-API, über die jeder Website-Betreiber dynamische Karten in die eigene Site integrieren kann. Der angezeigte Kartenausschnitt lässt sich dabei mit der Maus verschieben, und die Karten sind stufenweise scrollbar.

Wer tiefer in das API von GoogleMaps einsteigt, findet dort auch Funktionen zum Markieren von Punkten in einer Karte, und natürlich zum Auffinden von Adressen auf Basis von Straßen-, Orts- und Länderangaben. Damit lassen sich, wie dieses Tutorial zeigen wird, mit etwas Programmieraufwand auch automatische Anfahrtsskizzen oder Übersichtskarten generieren.

In diesem ersten Teil erläutern wir die Grundlagen der GoogleMaps, wie Sie Kartenausschnitte anzeigen lassen und wie Sie Adressen in Geo-Koordinaten umrechnen lassen. Im demnächst erscheinenden zweiten Teil des Workshops zeigen wir Ihnen, wie Sie Markierungen einblenden und wie Sie Webseite und GoogleMap weiter verknüpfen.

Programmierung in Javascript

GoogleMaps ist eine so genannte AJAX-Anwendung (Asynchronous JavaScript and XML). Die API wird daher komplett in Javascript angesprochen. Wer tiefer in die Programmierung einsteigen möchte, sollte gute bis sehr gute Javascript-Kenntnisse besitzen und sich vor allem auch mit objektorientierter Javascript-Programmierung auskennen.

GoogleMaps setzt zwingend einen aktuellen Browser mit aktivierten Javascript voraus. Die genaue Browserliste ist online einsehbar. Mit Hilfe der Javascript-Funktion GBrowserIsCompatible() finden Sie heraus, ob der Browser eines Besuchers kompatibel zu Google Maps ist. Im folgenden Tutorial verwenden wir die aktuelle GoogleMaps API Version 2.

Key anfordern

Zur Nutzung von GoogleMaps benötigen Sie einen Key von Google, den Sie allerdings nur erhalten, wenn Sie einen Account bei Google besitzen, beispielsweise über GoogleMail. Den Schlüssel berechnet Google auf Basis der eingegebenen URL.

Wer also zuerst auf seinem lokalen Rechner testen und entwickeln möchte, erstellt sich am Besten einen Schlüssel für http://localhost oder für die Adresse beziehungsweise den Rechnernamen, unter der der eigene Entwicklungsrechner zur Verfügung steht. Beachten Sie, dass GoogleMaps zwischen http://www.domain.de und http://domain.de unterscheidet. Beim Deployment der Anwendung dürfen Sie allerdings nicht vergessen, den Schlüssel auszutauschen!

Ausgabebereich definieren

Die GoogleMaps-API liefert die Kartengrafik automatisch in einem HTML-Container aus, dessen ID Sie beim Anlegen des Javascript-Objekts GMap2 (siehe unten) angeben. Wir verwenden in allen Beispielen die ID „map“. Dabei berechnet GoogleMaps die Größe der Karte auf Basis der Größe des darstellbaren Bereichs innerhalb des Containers. Um also eine Karte mit den Ausmaßen 500x300 Pixel auszugeben, genügt folgender DIV-Container:

<div id="map" style="width:500px; height: 300px">
</div>

Die Größe der Karte lässt sich auch direkt in Javascript bestimmen, allerdings ist die automatische Größenberechnung meist einfacher und für die meisten Einsatzzwecke ausreichend. Achtung: Ohne Größenangabe stellt Google Maps gar keine Karte dar, die Attribute width und height sind daher Pflicht!

Javascript einbauen

In jede HTML-Seite, die eine Karte darstellen soll, müssen Sie die Javascript-Datei mit der GoogleMaps-API wie folgt einbinden:

<script src="http://maps.google.com/maps?file=api&v=2.x&key=abcd" type="text/javascript"></script>

Als key verwenden Sie natürlich an Stelle von abcd ihren GoogleMaps-Key. Um sich aufwändiges Kopieren zu ersparen, speichern Sie den obigen Script-Block am Besten in einer eigenen Datei ab und binden diese Datei dann mit Hilfe von Server Side Includes ein. In unseren Beispielen wird dazu PHP verwendet, damit Sie Ihren Key leicht in die hier vorgestellten Beispieldateien einbauen können.

Jetzt fehlt nur noch die Anzeige der Karte an sich. Dazu definieren wir eine Javascript-Funktion load() die automatisch nach dem Laden der Seite aufgerufen wird:

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(48.137135, 11.575008), 15);
}
}

Erläuterung

Die bereits erwähnte Funktion GBrowserIsCompatible() prüft ab, ob der verwendete Browser kompatibel zu GoogleMaps ist – falls nicht, wird der Code zur Anzeige der Karte gar nicht erst ausgeführt. In der nächsten Zeile wird das Map-Objekt instanziiert, und als Argument der DIV-Container übergeben, den wir für die Ausgabe vorgesehen haben (id: map).

Die letzte Zeile positioniert die Karte auf einen bestimmten Ort auf der Erde, definiert also, was angezeigt wird. Der Wert 48.137135 ist dabei der Breitengrad, und 11.575008 der Längengrad für die Adresse des Münchner Marienplatzes. Das zweite Attribut 15 gibt die verwendete Zoom-Stufe an: ein Zoom-Wert von 1 zeigt die gesamte Weltkarte an, Werte über 17 sind nicht möglich.

Unload nicht vergessen

Zum vollkommenen Kartenanfangsglück fehlt jetzt noch der Aufruf der Funktion GUnload() welche dafür sorgt, dass die internen Datenstrukturen, die GoogleMaps im Browser angelegt hat, wieder freigegeben werden. Ohne diesen Aufruf kann es in manchen Browsern zu Speicherfehlern und letztendlich zu Abstürzen kommen. Sinnvollerweise sollte diese Funktion erst beim Beenden der Seite aufgerufen werden. Der Body-Tag sieht also folgendermaßen aus:

<body onload="load()" onunload="GUnload()">

Listing: Der erste Test

<!DOCTYPE html PUBLIC "-//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=iso-8859-1"/>
<title>Google Maps API Example - Geocoding API</title>
<?php require("gmap_script_inc.php") ?>
<script type="text/javascript">
//<![CDATA[
var map = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(48.137135, 11.575008), 15);
}
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width:500px; height: 300px"></div>
</body>
</html>

Controls einblenden

Die jetzt dargestellte Karte von München ist bereits interaktiv – verschieben Sie den Kartenausschnitt einfach mit der Maus. Für weitere interaktive Funktionen sind die vordefinieren Controls von GoogleMaps eine schöne Sache. Der Befehl

map.addControl(new GSmallMapControl());

blendet beispielsweise in der linken oberen Ecke der Karte eine kleine Control-Leiste mit Schaltflächen zum Vergrößern, Verkleinern und zum Bewegen des Kartenausschnitts ein. Der Befehl

map.addControl(new GLargeMapControl());

hat dasselbe Resultat, zeigt aber zusätzlich einen Schieberegler für die Zoomstufe, sowie eine Schalfläche, um zum Ausgangspunkt zurückzukommen. Sinnvollerweise sollten diese beiden Controls nicht gleichzeitig angezeigt werden, auch wenn das möglich ist. Durch den Aufruf von

map.addControl(new GMapTypeControl());

werden drei Schaltflächen dargestellt, mit denen man zwischen Satellitenfoto, Kartenansicht und Mischform (Hybrid) umschalten kann.

Listing: Karte mit Controls

<!DOCTYPE html PUBLIC "-//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=iso-8859-1"/>
<title>Google Maps API Example - Geocoding API</title>
<?php require("gmap_script_inc.php") ?>
<script type="text/javascript">
//<![CDATA[
var map = null;
var startpoint_1 = 48.137135;
var startpoint_2 = 11.575008;
var startzoom = 15;

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(startpoint_1, startpoint_2), startzoom);
// add controls
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
}
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width:500px; height: 300px"></div>
</body>
</html>

Adresse anzeigen

Bis hierher war das noch keine Raketenwissenschaft. Aber auch das Umrechnen von Adressen in Längen- und Breitengrade ist nicht weiter schwierig. Schließlich wollen Sie sich ja nicht alle Adressdaten von Hand ausrechnen. In GoogleMaps sorgt das Objekt Geocoder für diese automatische Adressumrechnung. Genauso wie das Map-Objekt müssen sie dieses zuerst instanziieren:

geocoder = new GClientGeocoder();

Dann können Sie mit der Funktion getLatLng(adresse, funktion) die Geokodierung aufrufen. GoogleMaps sucht die über einen String in Anführungszeichen angegebene Adresse - am besten einzugeben in der Form „Straße, Ort, Land“. Danach ruft das Script die als zweiten Parameter übergegebene Funktion auf, falls ein Ergebnis gefunden wurde. Diese Funktion erhält ein GLatLng-Objekt als Argument.

Vorsicht: Falls mehr als ein Treffer für eine Adresse gefunden wurde, liefert die Funktion das beste Resultat zurück.

Listing: GeoCoder

Die folgende Funktion zeigt eine Adresse mit dem übergebenen Zoom-Wert in der Karte an, und gibt eine Meldung aus, wenn die Adresse nicht gefunden wurde:

function showAddress(address, zoomvalue) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " nicht gefunden");
} else {
map.setCenter(point, zoomvalue);
}
}
);
}

In diesem Beispiel haben wir die Funktion gleich innerhalb des Aufrufs von getLatLng definiert – erkennbar am fehlenden Funktionsnamen. Der Wert für point wird vom geocoder geliefert.

<!DOCTYPE html PUBLIC "-//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=iso-8859-1"/>
<title>Google Maps API Example - Geocoding API</title>
<?php require("gmap_script_inc.php") ?>
<script type="text/javascript">
//<![CDATA[

var map = null;
var geocoder = null;
var startzoom = 15;

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
geocoder = new GClientGeocoder();
// add controls
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

showAddress("Marienplatz, München",startzoom);
}
}

function showAddress(address, zoomvalue) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " nicht gefunden");
} else {
map.setCenter(point, zoomvalue);
}
}
);
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width:500px; height: 300px"></div>
</body>
</html>

Fazit

Der kostenlose Kartendienst von Google kann spontan begeistern – gute Programmiermöglichkeiten, schnelle Darstellung, und sehr gutes Kartenmaterial sowie teilweise exzellente hoch auflösende Satellitenfotos (Tipp: Kanarische Inseln ansehen) sprechen eine deutliche Sprache.

Trotzdem sollte man einige Kritikpunkte im Auge behalten: So erfordert die Darstellung von großen Karten zwangsläufig eine schnelle Internetverbindung – gerade wenn man sich die Satellitenfotos anzeigen lässt. Außerdem sorgt die AJAX-Programmierung für eine deutliche Rechenlast im Browser und erfordert einen einigermaßen schnellen, aktuellen Rechner. Und zu guter Letzt sollte man sich die Nutzungsbedingungen von GoogleMaps genau durchlesen – so ist es Google beispielsweise erlaubt, in Zukunft Werbung in den Karten darzustellen.

Auch eine technische Einschränkung gibt es: Die Geokodierung ist auf 50000 Aufrufe pro Tag beschränkt, wer also mehr Seitenabrufe erwartet, sollte die Geodaten lieber als Längen- und Breitengrade übergeben, oder noch besser die Längen- und Breitengrade in einer eigenen Datenbank zwischenspeichern.

Online finden Sie die komplette Dokumentation der GoogleMaps-API und die Referenz zur API. Im demnächst erscheinenden zweiten Teil des Workshops zeigen wir Ihnen, wie Sie Markierungen einblenden und wie Sie Webseite und GoogleMap weiter verknüpfen.(Marco Zierl/mha)

Alternativen zu GoogleMaps

Bayernviewer

Der Bayerviewer des Landesamtes für Vermessung und Geoinformation bietet kostenlose, hochauflösende Luftbilder von ganz Bayern, die man kopieren und in eigene Websites einbauen darf (Nutzungsbedingungen beachten). Nachteile: Die Suche erfolgt nur nach Städten, Straßen müssen daher von Hand durch Scrollen gefunden werden. Eine topografische Ansicht existiert ebenfalls, leider ist diese jedoch sehr grobauflösend und einfach gehalten, und daher für die meisten Einsatzzwecke ungeeignet. Dafür kann man in dem als Java-Applet implementierten Viewer mit der Maus Distanzen, und Flächen abmessen. Qualität und Auflösung der Luftbilder sind sehr gut.

Openlayers

OpenLayers ist eine unter OpenSource veröffentlichte Javascript-Bibliothek mit der sich verschiedenste Kartendaten dynamisch in einer Website darstellen lassen. Auf diese Weise lassen sich beispielsweise auch die Kartendaten von GoogleMaps mit OpenLayers darstellen. Die Kartenansichten selbst sind interaktiv und lassen sich wie in GoogleMaps zoomen und mit der Maus verschieben.

Im Test ließ die Performance einiges zu wünschen übrig, was auch daran liegen kann, dass sich das OpenSource–Projekt noch in der Entwicklungsphase befindet.

Virtual Earth

Der Virtual Earth benannte Dienst von Microsoft stellt sich als direkte Konkurrenz zu Google Maps dar und wird bereits in Windows Live Local eingesetzt. Die Ansicht der Karten erfolgt hier ebenfalls interaktiv über Javascript. Die sehr komfortable Javascript-API bietet eine Vielzahl von Funktionen, wie Umgebungs- und Adressuche, und soll vor allem zur Suche nach Geschäften, Restaurants, Hotels etc. dienen – was bisher in deutschen Karten noch nicht verfügbar ist. Das Kartenmaterial ist sehr gut, und bietet detaillierte zoombare Informationen von der Weltansicht bis hin zur Straßenebene. Dokumentation und Performance konnten im Kurztest überzeugen und machten einen sehr professionellen Eindruck.