Problem:Auf der Homepage unseres Chores möchte ich gerne Hinweise in Kartenform geben, wie man mit dem Auto oder Öffis (=öffentliche Verkehrsmittel) zur Pauluskirche Stuttgart kommt.
Es gibt jede Menge Kartendienste im Internet - nur möchte ich eigentlich nicht von der Homepage eines Kirchenchores auf eine mit mehr oder weniger viel Werbung vollgestopfte Seite verweisen - ich möchte möglichst weitgehend den Inhalt der Seite kontrollieren können. Und das möglichst innerhalb des Kontextes meiner eigenen Seite, nicht unter einer fremden URL!
Lösung:Ja, ich weiß: Google, die Krake. Überall mischt Google mit und sammelt fröhlich Daten. Andererseits gebe ich meine Daten ja nicht für irgendein Gewinnspiel heraus, bei dem ich tolle Klingeltöne gewinnen kann, sondern ich erhalte echten Mehrwert. Z.B. den Speicherplatz und die Verwaltungssoftware für dieses Blog.
Oder auch Straßenkarten, nach Wunsch verknüpft mit ansehnlichen Luftbildern. Und da wären wir beim springenden Punkt:
Google-Maps (
http://maps.google.de/)
Google bietet für seinen Maps-Dienst eine API an, die man kostenlos in seine Homepage einbauen kann. Man muss sich dazu einmalig anmelden und erhält für seine Homepage (gebunden an eine URL) einen Code. Die Anmeldung setzt einen Google-Account voraus und erfolgt hier:
http://www.google.de/apis/maps/Man erhält einen persönlichen Code, der nur in Verbindung mit der zuvor selbst angegebenen eigenen URL funktioniert (auch nicht mit Unterverzeichnissen dieser URL, also von Anfang an das richtige Unterverzeichnis - falls nötig - angeben!).
Einsatz:Nun muss die Karte ja in eine Seite der eigenen Homepage eingebunden werden. Das funktioniert im Prinzip recht einfach, die offizielle Dokumentation gibt es hier:
http://www.google.de/apis/maps/documentation/Für diejenigen, die mit Javascript nicht allzuviel anfangen können, aber schnell ein ansehnliches Ergebnis haben möchten, hier eine kleine Anleitung, das fertige Beispiel kann man unter dieser Adresse bewundern:
http://home.arcor.de/pauluschor/weg.html
Anleitung:Wir basteln uns eine neue html-Datei oder überarbeiten eine bestehende, entweder in einem Editor mit Quelltextansicht oder einfach im normalen Editor im Windows-Zubehör.
Zunächst muss das Google-Script im html-head eingebettet werden, dort werden auch alle Einstellungen vorgenommen:
<html>
<head>
<title>Wegbeschreibung Pauluschor-Stuttgart</title>
<script src="http://maps.google.com/maps?file=IhrGoogleCode"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));Bis hierher muss fast nichts geändert werden, nur der Titel und die Worte
IhrGoogleCode, an deren Stelle, vor das schließende Anführungszeichen, kommt der Code, den man von Google erhalten hat.
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());Das sind die Kontrollfelder links oben. Mit ihrer Hilfe kann der Anwender die Zoomstufe und wählen und den Ausschnitt verschieben - wenn er dazu nicht einfach Drag&Drop verwenden will. Veränderungen bedarf es bei diesen Zeilen ebenfalls keiner. Man kann sie auch weglassen, dann kann der Anwender eben nicht die Zoomstufe verändern.
map.setCenter(new GLatLng(48.772624055119635,9.153199195861816), 16);Jetzt wirds wichtig: Hier gibt man an, welcher Kartenausschnitt gezeigt werden soll, genauer: auf welche Geokoordinaten zentriert werden soll (die beiden langen Zahlen, Breite und Länge) und welche Zoomstufe gewählt werden soll (in diesem Fall
16 - ein ziemlich naher Zoom).
Und wie bekommt man die gewünschten Geokoordinaten heraus? Ganz einfach:
http://www.infosports.com/m/map.htmDer Free Geocoder basiert ebenfalls auf Google-Maps, man zieht die Karte auf die richtige Position, zoomt ein wenig, klickt dann auf den Punkt, auf den später die eigene Karte zentriert werden soll, dort wird ein Marker angelegt, wenn man diesen jetzt anklickt, erscheint ein Fenster mit den Geokoordinaten, die man freundlicherweise einfach herauskopieren kann.
Aber Vorsicht: Der Geocoder gibt
Länge, Breite aus, man muss für unsere Zwecke die beiden Zahlen also umdrehen (
Breite, Länge)!
var icon = new GIcon();
icon.image = "symkirche.png";
icon.shadow = "schakirch.png";
icon.iconSize = new GSize(40, 59);
icon.shadowSize = new GSize(1, 1);
icon.iconAnchor = new GPoint(20, 30);
icon.infoWindowAnchor = new GPoint(40, 1);Jetzt gehts schon etwas in die Tiefe: diese Zeilen werden nicht unbedingt benötigt, man kann sie problemlos weglassen!
Wir legen ein Icon an (die Pauluskirche Stuttgart, Dateiname
symkirche.png), geben ihm einen Schatten (wollte ich nicht haben, ist in diesem Fall nur ein schwarzer Pixel, Dateiname
schakirch.png), definieren die Größe der beiden Grafiken, geben an, an welcher Stelle des Icons sein Ankerpunkt sein soll, an dem es später auf der Karte "befestigt" wird (hier: genau in der Mitte) und an welchem Punkt des Icons das dazugehörige Info-Fenster angedockt sein soll (hier: oben rechts).
var Punkt0 = new GLatLng(48.772624055119635,9.153199195861816);
var Punkt1 = new GLatLng(48.77385436402763,9.155881404876709);
var Punkt2 = new GLatLng(48.769993638392656,9.15459394454956);
var Punkt3 = new GLatLng(48.77490080994553,9.150989055633545);OK, jetzt definieren wir vier (Anzahl beliebig) verschiedene Punkte auf unserer Karte, der erste ist das Zentrum (die Pauluskirche), die anderen drei eine Bushaltestelle, die S-Bahn-Haltestelle und die Haltestelle der Stadtbahn.
var marker0 = new GMarker(Punkt0, icon);
var marker1 = new GMarker(Punkt1);
var marker2 = new GMarker(Punkt2);
var marker3 = new GMarker(Punkt3);Aus den vier Punkten werden jetzt Marker (wie beim Geocoder, wenn man auf die Karte klickt), der erste Marker erhält nicht nur die Geokoordinaten des ersten Punktes, sondern auch noch unser Icon von oben - wenn keines definiert wurde, dann
, icon einfach weglassen.
GEvent.addListener(marker0, "click", function() {
marker0.openInfoWindowHtml("<div><strong>Pauluskirche
</strong></div><div>Paulusstr. 1</div><div>
70197 Stuttgart</div>");
});
map.addOverlay(marker0);
marker0.openInfoWindowHtml("<div><strong>Pauluskirche
</strong></div><div>Paulusstr. 1</div><div>
70197 Stuttgart</div>");Jetzt wird der erste Marker (
marker0) tatsächlich auf die Karte gesetzt und ihm auch gleich ein Info-Fenster mitgegeben. Innerhalb der Anführungszeichen steht hier weiterer html-Code: alles, was zwischen
<div>...</div> steht, bekommt eine eigene Zeile in diesem Info-Fenster,
<strong>...</strong> bedeutet, dass der Text dazwischen fett und etwas größer (je nach Browser) dargestellt wird.
Die Zeile
marker0.openInfoWindowHtml steht absichtlich zweimal da: Beim ersten Mal wird definiert, was erscheinen soll, wenn jemand den Marker anklickt. Beim zweiten Mal wird gesagt, dass beim ersten Laden der Seite dieses Info-Fenster bereits geöffnet sein soll. Es kann immer nur ein Info-Fenster zur gleichen Zeit offen sein!
GEvent.addListener(marker1, "click", function() {
marker1.openInfoWindowHtml("<div><b>Bushaltestelle Bismarckplatz</b></div>
<div>Linie 42</div>");
});
map.addOverlay(marker1);
GEvent.addListener(marker2, "click", function() {
marker2.openInfoWindowHtml("<div><b>S-Bahn-Haltestelle Schwabstraße
</b></div><div>Ausgang Seyfferstraße</div><div>alle Linien</div>");
});
map.addOverlay(marker2);
GEvent.addListener(marker3, "click", function() {
marker3.openInfoWindowHtml("<div><b>Stadtbahnhaltestelle
Arndt/Spittastraße</b></div><div>Linie 4</div><div>Linie 9</div>");
});
map.addOverlay(marker3);
}
}
//]]>
Jetzt folgen die restlichen 3 Marker (jeweils nur mit einem
marker0.openInfoWindowHtml, schließlich sollen diese Info-Fenster noch geschlossen sein!), schließlich kommen die nötigen Klammern, die ganz oben geöffnet wurden, das Ende des Scriptes und das Ende des html-heads.
So, und jetzt muss das Script nur noch in der eigentlichen "Webseite" geöffnet werden, das geschieht im html-body:
<body onload="load()" onunload="GUnload()" bgcolor="#FFFF99">
<center>
<div>Wie kommt man zur Pauluskirche?</div>
<font face="arial, verdana" size="2">
<div id="map" style="width: 800px; height: 600px;"></div>
</font>
</center>
</body>Was passiert hier: die beiden Tags
onload und
onunload stammen von Google, die müssen so da stehen. Dahinter (bgcolor) wird die Hintergrundfarbe der Seite angegeben.
Alles nun folgende wird bei mir zentriert (
<center>). Das wirkt sich auch auf die Texte in den Info-Fenstern der Google-Karte aus!!!
Nun folgt die Überschrift meiner Seite (nicht zu verwechseln mit dem Titel!) in einem eigenen Absatz (
<div>...</div>).
Dann definiere ich die Schriftart für die Info-Fenster, hier: Arial oder Verdana in der Browserschriftgröße 2.
Die nächste Zeile legt jetzt endlich die Karte an!!! Veränderungen kann man hier an der Größe des Kartenbereichs vornehmen, also an der Breite (
width) und der Höhe (
heigth), Angaben in Pixel. Ich habe hier Werte genommen, die auf den meisten Monitoren problemlos angezeigt werden müssten.
So, und das wars auch schon. Noch brav alle geöffneten Tags wieder schließen (bis
</body>), und schon kann man seine neue Homepage speichern, hochladen und bewundern!
