Markus Baersch

Software · Beratung · Lösungen


Dienstag, 29. Juli 2008

Karten in die eigene Website einbinden

Karten und Anfahrthinweise bestehen nicht nur auf privaten Webseiten, sondern nach wie vor auch bei Unternehmen mitunter aus abenteuerlichen Konstruktionen. Selbstgemalte Skizzen, schlecht eingescannte Grafiken vom eigenen Flyer... und selbst gegen Lizenzrechte verstoßende Abbildungen von Straßenkarten gibt es auch heute noch zu finden.

Dabei ist die Auswahl von Kartendiensten, die man im Internet nutzen und auch recht einfach in die eigene Website einbinden kann, inzwischen groß. Allen voran stehen auch hier - wie bei Suchmaschinen - die großen Drei: Google Maps, Yahoo Maps und Microsofts VirtualEarth Bing Maps. Und es gibt natürlich nach wie vor spezialisierte Anbieter wie viamichelin.de, falk.de oder map24.de. Egal ob ein Map-Dienst eines Suchmaschinenanbieters oder die Routenplanung eines Spezialanbieters verwendet werden soll, alle bieten einen mehr oder weniger einfachen Zugang zum Kartenmaterial (und oft auch einer ganzen Menge an zusätzlichen Funktionen). Auch die Komplexität der Einbindung in die eigene Website fällt unterschiedlich aus. Einige - wie Google Maps - bieten auch unterschiedliche Wege an, um zum Ziel zu kommen.

Links zu Online-Karte oder -Routenplanung

Wer es sich möglichst einfach machen will, kann einen Link zu einem beliebigen Routenplaner im Web anbieten, der möglichst direkt zur Anzeige der eigenen Adresse führt. Ebenso beliebt sind kleine Suchmasken, die als "Widget" per Codeschnippsel in die eigene Seite eingebunden werden und eine Karte anzeigen oder vorgeblendete Start- oder Zieladressen zur Planung der Anfahrt enthalten. Wer sowas sucht, sollte z. B. Map24 oder Falk wählen, denn hier wird es dem Benutzer denkbar einfach gemacht, eine Karte inkl. einer Routenplanungsfunktion in sein Impressum oder sonstwo auf der Webseite einzubinden. Bei Falk kann in einem Generator der erforderliche Code erzeugt werden, der dann in den Quellcode der eigenen Seite eingebunden werden kann, um eine Kartenansicht oder einen Planer auf einen Mausklick hin anzuzeigen. Gleiches bietet bot der "Verlinkungsassistent" bei Map24. Beides führt aber nicht zur Anzeige einer Karte - wer hier eine Alternative zu "GYM" (Google, Yahoo, Microsoft) sucht, kann konnte z. B. bei viamichelin.de eine API benutzen, das ähnlich wie Virtual Earth von MS daherkommt ( oder umgekehrt ;)).

Google Maps auf eigenen Webseiten nutzen

Der einfachste Weg zur direkten Anzeige einer Karte führt über das Einbinden einer Kartenansicht; z. B. via Google Maps in einem eingebettenen Frame (iFrame) auf der eigenen Seite. Die Verwendung eines Frames ist dem Zweck angemessen und erfordert durch den fertigen Codeschnippsel ebensowenig technische Kenntnisse zum Einbau wie die Widgets der Spezialanbieter. Den erforderlichen Code erhält man ebenso einfach, wie der Einbau zu erledigen ist: Bei maps.google.de sucht man nach der eigenen Adresse und klickt dann auf den Link "URL zu dieser Seite". Dort kann dann der "HTML-Code zum Einbetten in eine Website" entweder noch angepaßt oder direkt in die Zwischenablage kopiert und in das eigene Impressum übernommen werden.

maps einbinden

Wer keine Karte braucht, findet alternativ auch hier einen fertigen Link zur aktuell angezeigten Karte, der es erlaubt, dem Besucher eine zügige Routenplanung zu ermöglichen. Wer mehr will, muss auch hier auf ein API zurückgreifen... das ist aber ja nicht die Anforderung aus der Überschrift.

So sieht die eingebettete Google-Maps - Karte als lebendes Beispiel aus:



Karten von Yahoo Maps einbinden

Update 01/2012: Yahoo Maps sollte eigentlich schon im September 2011 den Dienst einstellen, dennoch funktionieren die Karten derzeit noch. Wer aber heute noch eine Karte in die eigene Site einbinden will, sollte sich natürlich nicht mehr auf einen solchen Kandidaten verlassen und entweder auf Google oder Bing (siehe unten) setzen. Hier dennoch der Vollständigkeit halber die Beschreibung der (noch) funktionierenden Karten von Yahoo:

Ähnlich geht es bei Yahoo zu. Ein wesentlicher Unterschied ist hier aber, dass zunächst eine Anmeldung der nutzenden Seite bei Yahoo erforderlich ist, die dann einen eindeutigen Schlüssel enthält (ID). Dieser ist bei der "Initialisierung" in Form der Einbindung benötigter Scripte - z. B. im Kopf der Seite - anzugeben:

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=meineID"></script>

Anschließend dient folgender Code zur Erzeugung einer Karte:

var dv = document.getElementById("kartenflaeche")
dv.innerHTML = "";
var map = new YMap(dv);
var homepoint = new  YGeoPoint(51.138298, 6.44803);
var homeMarker = new YMarker(homepoint);
map.addTypeControl();
map.addZoomLong();
map.setMapType(YAHOO_MAP_REG);
map.drawZoomAndCenter(homepoint, 3);
homeMarker.addAutoExpand("Kohrbleiche 25,
41199 Mönchengladbach"); map.addOverlay(homeMarker);

Anders als bei Google wird die Karte hier per JavaScript auf einen beliebigen "Container" gezeichnet, der auf der Seite dort vorhanden ist, wo später die Karte erscheinen soll. Das Script kann entweder direkt in den Code der Seite eingefügt werden oder z. B. als externes Script ausgelagert und im "onload"-Ereignis der Seite geladen werden.

Dazu wird der gewünschte Container (hier ein div-Element) einfach als Platzhalter in die Seite eingebunden und dort ggf. ein Hinweistext untergebracht:

<div id="kartenflaeche"><p>Karte wird geladen...</p></div>

Das obige Script identifiziert diesen Container anhand seiner ID "kartenflaeche" und löscht zunächst den Inhalt (der Hinweistext oder was auch immer im Container derzeit steht). Dann wird eine Karte "map" als Objekt und anhand der Koordinaten des eigenen Wohnorts ein Punkt "homepoint" erzeugt; darunter eine Markierung für diesen Punkt, der später in der Karte verwendet wird.

Die folgenden Angaben dienen dazu, die Karte "bedienbar" zu gestalten, indem einzelne Bedienelemente hinzugefügt werden. Im Beispiel ist dies die Auswahl der Ansicht und ein "Zoom-Schieber". Es gibt noch weitere Elemente, die die Karte mit zusätzlichen Funktionen ausstatten (Vorschlag zum Probieren: "map.addPanControl();"), die beiden aus dem Beispiel reichen aber für eine brauchbare Karte. Wie diese aussehen soll (Satellit, Karte oder Mischansicht) wird mit der nächsten Zeile definiert. Das Beispiel nutzt die Kartenansicht, die beiden anderen werden durch Verwendung des Parameters YAHOO_MAP_SAT bzw. YAHOO_MAP_HYB statt YAHOO_MAP_REG erzeugt.

Anschließend wird die Karte auf den eigenen Wohnort "zurechtgezoomt" und die Karte ist eigentlich fertig. Wenn der eigene Standort dann noch mit einem Hinweismarker versehen werden soll, kann es wie im Beispiel mit den letzten beiden Zeilen erledigen und beliebigen Text bei addAutoExpland() angeben.

Wer eine andere Ansicht wünscht, kann die letzten beiden Zeilen auch gegen ein einfaches

map.addMarker(homepoint);

austauschen oder die Variante als Ersatz für die gleichen beiden Zeilen folgendes versuchen:

map.showSmartWindow(homepoint, "Kohrbleiche 25,
41199 Mönchengladbach");

Kartenzeichnen ist zwar die Hauptaufgabe des Dienstes, er kann aber noch viel mehr. Zahlreiche weitere Funktionen der Entwicklerschnittstelle zu Yahoo Maps laden zu langen Entdeckungsstreifzügen ein (wenn man denn die Zeit aufbringen kann). Wer mehr wissen will, findet eine ausführliche Dokumentation unter http://developer.yahoo.com/maps/.

So sieht das Ergebnis von Yahoo aus:

Dienst nicht mehr verfügbar.

Bleibt noch die Frage zu klären, wie man die Koordinaten seines eigenen Standorts herausfindet, um eine solche Karte mit den passenden Angaben zu versehen. Ein einfacher Weg führt über die Kartendienste selbst: Suchen Sie z. B. bei Google wie oben angageben nach Ihrem Standort und sehen Sie sich den Link unter "URL zu dieser Seite" einmal genauer an, werden Sie eine Angabe wie "ll=x.xxxxxx,y.yyyyyy" finden. Diese Angaben tragen Sie als YGeoPoint(x.xxxxxx, y.yyyyyy) in das obige Script ein - fertig.

Virtual Earth von Microsoft verwenden

Update 01/2012: Virtual Earth ist schon lange "Bing Maps" gewichen und dieser Abschnitt ist daher eine Art "Altlast" aus 2008. Die Einbindung von Karten ist damit natürlich nach wie vor möglich und wer eine Alternative zu Google Maps benötigt, kann sich bei Bing Anleitungen und Beispiele ansehen. Ich spare mir die Mühe hier, weil ich diese Karten (zum Glück) nirgends eingesetzt habe, so dass sie mir auch nicht beim Wegfall der Schnittstelle um die Ohren geflogen sind. Puh! Hier der "alte" Text zu Virtual Earth mit nicht mehr funktionierendem Beispiel:

Auch Virtual Earth, das "erforderliche Pendant" zu Google Maps bei Microsoft, bietet eine fertige Sammlung von Objekten und Funktionen, die per JavaScript genutzt werden können, um eine Karte oder ein Satellitenbild anzuzeigen. Natürlich bietet auch hier die Entwicklerschnittstelle weitaus mehr als die Anzeige einer Karte, aber um das gewünschte Ziel zu erreichen, muss lediglich ein externes Script eingebunden werden, welches die benötigten Funktionen bereit stellt:

<script language="javascript" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>

Anschließend genügt ein Dreizeiler, um die Karte anzuzeigen (wobei man sich je nach Verwendung sogar die zweite Zeile noch sparen kann):

map = new VEMap("kartenflaeche");
document.getElementById("kartenflaeche").innerHTML = "";
map.LoadMap(new VELatLong(51.138298,6.44803), 15, 'r', false);

Es wird ein Kartenobjekt erzeugt und die ID des gewünschten Containers (siehe Yahoo-Beispiel) direkt übergeben; danach wird der Inhalt dieses Containers entfernt (je nachdem, ob dort z. B. "Karte wird geladen..." oder ein anderer Hinweis stand) und eine Karte geladen. Die Parameter dienen auch hier dazu, die Karte zu bestimmen. Anzupassen sind nur die Koordinatenangaben, die genau wie oben für Yahoo beschrieben gewonnen und an die gewünschte Adresse angepaßt werden können.

Ergebnis mit Virtual Earth:

Dienst nicht mehr verfügbar.


Der Rest steuert die Art und Darstellung der Karte. Wer z. B. lieber ein Satellitenbild möchte, ersetzt die letzte Zeile wie folgt:


map.LoadMap(new VELatLong(51.138298,6.44803), 15, 'a', false);

Wer dieses Beispiel aussprobiert und feststellt, dass die Karte dem Container "entkommt" und sich einfach oben direkt über den Inhalt der Seite legt, kann dies i. d. R. dadurch beheben, dass der kartenansicht-Container durch die CSS-Stilanweisung position:relative zum geeigneten Ausgangspunkt für die abolut positionierten Karten von Virtual Earth macht. Der komplette Codeabschnitt für den Kartencontainer sieht hier dann also wie folgt aus:

<div id="kartenflaeche" style="position:relative"><p>Karte wird geladen...</p></div>

Mehr Informationen über die Optionen finden sich in der Hilfe zu Virtual Earth. Ein guter Einstieg in die Funktionsvielfalt, die (wie bei Yahoo) auch in Desktopanwendungen eingebunden werden kann, findet sich unter dev.live.com/virtualearth/sdk/.

Fazit: Welchen Anbieter nutzen?

Es gibt mehr als einen Weg, es seinen Besuchern einfach zu machen, einen interaktiven Anfahrthinweis direkt zur Routenplanung anzubieten. Und es gibt verschiedene Komplexitätsgrade bei der Umsetzung eines solchen Vorhabens. Unabhängig davon, dass die APIs der Kartendienste von GYM weitaus mehr bieten als nur einen "intelligenten Link" auf eine externe Karte, wie es im Fall der Spezialanbieter geschieht, müssen vor allem die Fähigkeiten zur zuverlässigen Auslieferung der Karten auf den nutzenden Websites als Kriterium dienen, wenn eine Entscheidung für einen Dienst getroffen werden soll.

Google besticht hier nicht nur durch eine denkbar einfach zu implementierende Lösung, sondern vor allem durch eine zuverlässige und gute Performance. Zumindest während meiner Tests (im eigenen Impressum; schon ein paar Monate her) hatte ich sowohl bei Verwendung von Yahoo Maps als auch bei Virtual Earth mitunter derbe Probleme mit der Ladezeit meiner eigenen Seite, da die Anforderung der externen Scripte schon vor dem eigentlichen Zeichnen der Karte mitunter mehrere Sekunden dauerte - unzumutbar für viele Besucher, so dass ich mich selbst für die Google-Variante entschieden habe. Das soll aber nicht bedeuten, dass das auch heute noch so sein muss; außerdem bieten sich sowohl Yahoo als auch MS mit ihren Lösungen für alle an, die ein Problem mit Google haben. Wer nun Lust zum Ausprobieren bekommen hat: Viel Spaß!

Kommentare sind nicht zugelassen.


Seite zuletzt aktualisiert: Dienstag, 29. Juli 2008