von Marc Teuber
Google Maps sind trendy, technisch auf dem neuesten Stand und zudem noch kostenlos. Eine Integration in die eigenen Seiten ist ohne großen Aufwand möglich und kann dort auch als Anfahrtsskizze dienen.
Google Maps erblickte im Februar 2005 das Licht der Welt. Mit diesem Dienst ist es möglich, beliebige Orte auf einer Karte oder auf einem Satellitenbild anzuzeigen. Der Anwender hat dann die Möglichkeit, die Karte mit seiner Maus zu verschieben und hinein- oder herauszuzoomen.
Als Seitenbetreiber dürfen Google Maps sowohl auf privaten als auch auf gewerblichen Websites integrieren. Sind mehr als 500.000 Zugriffe vorauszusehen, sollten Sie im Vorfeld bei Google nachfragen. Ist die Anfahrtsskizze wie üblich Teil einer Kontaktseite oder des Impressums ist die Gefahr durch solch enormem Traffic wohl eher gering.
Google behält sich das Recht vor, in Zukunft Werbung innerhalb der Google Maps zu platzieren. Jedoch dürfte noch einige Zeit vergehen, bis das der Fall sein wird.
Google Maps als Anfahrtsskizze auf Ihrer Website.
Um Google Maps nutzen zu können, ist eine Anmeldung erforderlich. Das geht schnell und einfach mit drei Klicks und ist zudem – wie fast alles bei Google – kostenlos. Nach der Anmeldung Ihrer Website erhalten Sie einen sogenannten „Google Maps API Key“. Dieser Schlüssel besteht aus gut 80 Zeichen und wird später benötigt.
Die Anmeldung Ihrer Website setzt voraus, dass Sie in Besitz eines persönlichen Google-Kontos sind. Wenn das nicht der Fall sein sollte, muss dies rasch nachgeholt werden.
Eingebunden werden Google Maps per JavaScript. Im Header wird folgende Zeile erwartet:
<script
src="http://maps.google.com/maps?file=api&v=2&key=[IHR
KEY]" type="text/javascript"></script>
Den Teil [IHR KEY] (inklusive der eckigen Klammern) müssen Sie durch Ihren Schlüssel („Google Maps API Key“) austauschen.
Nun wird mit JavaScript eine Funktion erstellt, welche die eigentliche Arbeit erledigt.
<script type="text/javascript">
function loadGoogleMaps() {
if (GBrowserIsCompatible()) {
var map = new
GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(54.9381,
8.3204), 15);
var infoTabs = [
new GInfoWindowTab("Dr.
Web", "Dr. Web für Seitenbetreiber!")];
var marker = new
GMarker(map.getCenter());
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowTabsHtml(infoTabs); });
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
}
}
</script>
In der Funktion prüfen wir zunächst mit dem Befehl GbrowserIsCompatible, ob es sich um einen kompatiblen Browser handelt. Ist das der Fall, wird ein neues Objekt mit der Bezeichnung map erstellt. In den nächsten Zeilen rufen wir noch zwei mal die Methode addControl auf, um der späteren Anfahrtsskizze Navigations- und Zoombuttons zu geben. Mit der Methode setCenter setzen wir zum einen die Längen- und Breitengrade (wird im nächsten Absatz genauer erklärt) und zum anderen den Zoomfaktor. Der Zoomfaktor ist ein Wert zwischen 0 und 17. Die anschließenden Zeilen erzeugen auf der Karte eine sogenannten Marker und ein kleines Fenster mit dem Text „Dr. Web für Seitenbetreiber“.
Die Längen- und Breitengrade ergeben einen exakten Punkt auf der Karte. Immer dann, wenn Sie die Karte positionieren oder einen Marker setzen möchten, müssen Sie die Längen- und Breitengrade angeben. Es gilt also jetzt, diese beiden Grade für Ihre Firmenanschrift zu finden. Google Maps bietet uns zwar dafür eine Möglichkeit, die jedoch unser JavaScript unnötig vergrößert. Es bietet sich eine Alternative an. Via multimap.com kann eine Firmenanschrift erfaßt werden. Unten „Map Information“ finden sich dann die Werte „Lat“ und „Lon“. Diese Werte – die in Klammern stehen – werden nun benötigt.
Die JavaScript-Funktion loadGoogleMaps rufen wir im <body>-Tag auf.
<body onload="loadGoogleMaps()">
Dort, wo später die Anfahrtsskizze platziert werden soll, muss die folgende Zeile eingesetzt werden:
<div id="map" style="width: 500px; height: 300px; border:
1px solid black"></div>
Google Maps funktionieren in allen modernen Browsern. Sollte Ihnen das Verfahren zu kompliziert sein oder Sie nur einmal Testen wollen, versuchen Sie den Dienst Quikmaps, der eine besonders einfache Integration ermöglicht. ™
Erstveröffentlichung 06.09.2006
[...] der Anwendung ist, dass neben der JavaScript-basierenden Version von Google Maps (siehe Artikel Anfahrtsskizzen mit Google Maps) auch eine statische Karte (eine einfache GIF-Grafik) eingebunden wird, die dargestellt wird, wenn [...]