November 25th, 2006
Google-Maps auf der eigenen Seite einsetzen
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 unter der Bedingung, dass die Seite, auf der die Karte eingebunden wird, kostenlos im Internet zur Verfügung steht. Weiterhin bietet Google keinen Support für Entwickler an, die die Google-Maps API verwenden möchten. Aber ein Entwickler der sein Handwerk versteht benötigt auch keinen. Es gibt eine ausführliche Beschreibung der Funktionen mit Beispielen und diese einzubinden ist recht einfach.
Möchte man Google-Maps einbinden, benötigt man zunächst einen Google-Maps API Key. Dieser wird beim Abrufen der Karten von Google übertragen und ist für die Domain auf der die Karte eingebunden wird gültig. 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 etwas erläutert werden.
Zunächst definiert man ein DIV, in das die Karte geladen werden soll irgendwo im body-Tag der HTML-Seite:
<div style="position: absolute; top: 0px; left: 200px; width: 800px; height: 600px" id="map"></div>
Der Anzeigebereich kann man mittels dieses Divs exakt festlegen.
Im nächsten Schritt wird die Karte mittels eines Javascript-Aufrufes in dieses dif eingebunden.
<script 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 Key, der zuvor erstellt wurde, für key=abcdefg eingesetzt werden. Die Funktion load führt dann die eigentliche Initialisierung der Karte aus. Dabei wird zunächst eine Funktion GBrowserIsCompatible() aus der Google-API augerufen, die sicher stellt, das der Browser, der die Seite anzeigt dazu geeignet ist. Danach wird ein neues Karten-Objekt erstellt. Dabei wird die ID des Divs, das die Karten enthalten soll, in diesem Fall “map”, übergeben. Der nächste Aufruf zentriert die Karte auf bestimmten Koordinaten. Der erste Parameter von setCenter ist dabei die Koordinate selbst, der zweite Parameter gibt einen Zoom-Level an. Eine genaue Dokumentation zu dem 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 nun 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, das 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.