Wer eine dynamische und sehr leistungsfähige Karte auf seiner Webseite einsetzen möchte, kann das mit Google-Maps recht schnell und problemlos erledigen. Das Angebot von Google ist kostenlos. Einzige Bedingung: Die Seite, auf der die Karte eingebunden wird, muss kostenlos im Internet zur Verfügung stehen. Der Nachteil: Google bietet keinen Support für Entwickler, welche die Google-Maps API verwenden möchten. Ein Entwickler, der sein Handwerk versteht, benötigt jedoch auch keinen. Es gibt eine ausführliche Beschreibung der Funktionen mit Beispielen, die Einbindung ist recht einfach.
Voraussetzung: API Key
Möchte man Google-Maps für die eigene Website nutzen, benötigt man zunächst einen Google-Maps API Key. Dieser wird beim Abruf der Karten von Google übertragen und ist für die Domain gültig, auf welcher die Karte eingebunden wird. Auf jeden Fall ist es ratsam, einmal die Nutzungsbedingungen durch zu lesen. Google stellt eine ausführliche Dokumentation der API zur Verfügung. Hier sollen nur die ersten Schritte näher erläutert werden.
Anleitung zur Einbindung
Zunächst definiert man ein DIV irgendwo im body-Tag der HTML-Seite, in das die Karte geladen werden soll:
<div style="position: absolute; top: 0px; left: 200px; width: 800px; height: 600px" id="map"></div>
Der Anzeigebereich wird mit Hilfe dieses DIVs exakt festgelegt.
Im nächsten Schritt wird die Karte mittels eines Javascript-Aufrufs in dieses DIV eingebunden.
<script xsrc="http://maps.google.com/maps?file=api&v=2&key=abcdefg" mce_src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
Hierbei ist in der ersten Zeile der eigene, zuvor erstellte Key für key=abcdefg eingesetzt worden. Die Funktion load führt dann die eigentliche Initialisierung der Karte aus. Dabei wird zunächst eine Funktion GBrowserIsCompatible() aus der Google-API aufgerufen. Diese stellt sicher, dass der Browser dazu geeignet ist die Seite anzuzeigen. Danach wird ein neues Karten-Objekt erstellt. Die ID des DIVs, das die Karten enthalten soll - in diesem Fall "map" - wird übergeben.
Der nächste Aufruf zentriert die Karte auf bestimmte Koordinaten. Der erste Parameter von setCenter ist dabei die Koordinate selbst, der zweite Parameter gibt einen Zoom-Level an. Eine genaue Dokumentation zum Zoom-Level wurde nicht gefunden. Je kleiner der Wert ist, desto näher wird herangezoomt. Hier muss ein wenig ausprobiert werden.
Um die Karte das erste Mal ausprobieren zu können, fehlt nur noch ein Aufruf im Body-Tag der HTML-Seite:
<body onload="load();" onunload="GUnload()">
Dadurch wird die zuvor definierte JS-Funktion load() aufgerufen, sobald die Seite im Browser dargestellt wird. Der zweite Aufruf onunload="GUnload()" sorgt dafür, dass beim Verlassen der Seite der Speicher des Web-Browsers aufgeräumt wird, und sollte deshalb auch unbedingt mit eingebunden werden.
Ein kleines Beispiel ist hier verfügbar.
