Google maps to go
Google Maps sind ein feine Sache, da sie sich kostenlos in die Website einbinden lassen, zoom- und verschiebbar sind und mit einem klickbaren Marker versehen werden können, der weitere Infos einblendet.
Die Integration in die eigene Website ist zwar nicht banal, aber auch für Nicht-HTML’er durchaus realisierbar.
Und da ich selbst immer wieder über die eigene Blödheit selben Steinchen gestolpert bin, gibt es nun das erste Tutorial. And here we go.
Step 1: Den API-Schlüssel besorgen
Um den Google Maps Dienst nutzen zu können, muss man sich zunächst einen (kostenlosen) API-Key bei Google besorgen. Den bekommt man auf der Google Maps Seite, unter dem Link “Sign up for a API Key“. Diesen Schlüssel muss man dann im HEAD-Bereich der Seite als Javascript einbinden.
<script type="text/javascript" src="http://maps.google.com/maps?file=api%20&v=2&key=[Dein_API_Key]"></script>Achtung! Der API Key ist an eine real existierende Domain gebunden, funktioniert also nur online, und nicht auf lokalen Serverumgebungen.
Step 2: Die Koordinaten finden
Um den Ausschnitt der Karte zu bestimmen, muss man sich nun die genauen Koordinaten des Zielpunktes der Karte organisieren. Das erfolgt über die Angabe des Breiten- (Latitude) und Höhengrades (Longitude). Das klappt hervorragend mit dem getLonLat-Service vom Mapki.
Man schiebt und zoomt sich einfach von der Weltkarte auf seine Wunschkoordinaten, und klickt dort auf den entsprechenden Punkt, in der Regel ein Hausdach. Unterhalb der Karte werden dann die Koordinaten ausgegeben, die man sich am besten in eine Textdatei kopiert.
Step 3: Die Karte einbinden
Nun zur Sache: Dort, wo die Karte erscheinen soll, platzieren wir einen DIV-Container mit dem Namen “meine_gmap”. Darunter laden wir dann ein weiteres Javascript mit den Anweisungen für unsere Google-Map.
<div id="meine_gmap" style="width: 500px; height: 400px;"></div>
<script type="text/javascript" src="/[Dein Pfad]/gmapdata.js"></script>Step 4: Das JS mit den Koordinaten
Im folgenden externen Javascript (in meinem Fall gmapdata.js) werden neben den Koordinaten auch noch Angaben zum User Interface und der initialen Darstellung der Karte gemacht.
//<![CDATA[
var map = new GMap2(document.getElementById("meine_gmap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng([Deine_Latitude],[Deine_Longitude]), 13, G_NORMAL_MAP);
//]]>Step 5: Der Marker und die Info-Sprechblase
Um die ganze Sache rund zu machen, brauchen wir natürlich noch einen Marker, der auf unseren gewählten Punkt zeigt, und auf Klick eine Info-Sprechblase einblendet. Hierfür ist eine Javascript-Funktion notwendig, um den Marker zu bestimmen und den gewünschten Text in die Sprechblase zu übermitteln.
function createMarker(point) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<strong>[Dein Name ]</strong><br/>[Deine Adresse]");
});
return marker;
}Step 6: Den Marker übergeben
Der letzte Schritt wäre dann noch, den Marker an unsere Karte zu übermitteln. Dazu müssen wir das Script aus Step 4 um eine Zeile erweitern, die wir einfach untendran kleben. Das ganze sollte dann so aussehen:
//<![CDATA[
var map = new GMap2(document.getElementById("meine_gmap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng([Deine_Latitude],[Deine_Longitude]), 13, G_NORMAL_MAP);
map.addOverlay(createMarker(new GLatLng([Deine_Latitude],[Deine_Longitude])))
//]]>Und das war’s dann…
Nach all diesen Schritten sollten wir nun eine funktionierende Google Map auf unserer Seite haben, so wie auch hier zu sehen: Die Anfahrt zu 72dpi.