Routenplaner-Formular in die eigene Seite einbinden

Ok... die Adresse habe ich. Nur wie komme ich am schnellsten dort hin und wie weit ist es.? Diese Frage dürfte sich jeder schon mal gestellt haben. Zum Glück gibt es Straßenkarten online. Wir zeigen wie man ein Routenplaner-Formular in die eigene Seite einbaut und mit seinen Adressen verknüpft.

Wir haben vor kurzem einen Auftrag durchgeführt, bei dem der Kunde ein Formular wünschte, mit dem er direkt aus dem Impressum heraus einen Routenplaner aufrufen konnte. Dafür hatte er ein Plugin von Maps24 gewählt das per Iframe in die Seite eingebunden werden sollte. Leider passte das Layout ganz und gar nicht zur Seite und die Konfiguration von mehreren Zieladressen war nicht möglich. Zudem nervten Plugin und Karte mit Werbung.

Zum Glück lässt sich jedoch der Routenplaner von Google-Maps auch von außen mit Start- und Zieladresse füttern. Die Parameter saddr und daddr werden als Request-Variablen akzeptiert und direkt eine Route zwischen den beiden Adressen berechnet und ausgegeben.

Das Formular für die eigene Seite ist dadurch wirklich einfach zu programmieren.

Der Code

<form action="http://maps.google.com/maps" method="get" target="_blank">
  <label>Startadresse (mit Ort)</label>
  <input class="inputbox" type="text" name="saddr" value="" />
  <label>Zieladresse</label>
  <select name="daddr" >
    <option value="Hauptbahnhof, Berlin">Hauptbahnhof Berlin</option>
    <option value="Flughafen, München">Flughafen München</option>
  </select>
  <button type="submit">Karte aufrufen</button>
</form>

 

Das Formular in Aktion

Startadresse (mit Ort)
Zieladresse
 

Falls man nur eine Zieladresse hat, wird das Formular noch einfacher. Dann wird die Zieladresse einfach als hidden-field in das Formular eingebaut.

Etwa so
<input type="hidden" name="daddr" value="Berlin, Hauptbahnhof" />

 

Wer Google nicht mag, der wird bei OpenStreetMap fündig. Zumindest für Großstädte sind die Daten sogar noch besser, da auch Baustellen, Sperrungen und Radwege in die Routenplanung mit einbezogen werden. Die Universität Heidelberg betreibt Openrouteservice.org. Leider ist es uns nicht gelungen die Adressen direkt beim Seitenaufruf zu übergeben und berechnen zu lassen. Lediglich bei dem barrierefreien Router des Projektes konnten wir über "start" und "end"-Parameter eine Route abrufen. Allerdings leider ohne Karten.

openstreetmap

Adressen

 

Kommentar hinzufügen

E-Mail: Für Antworten. Wird nicht angezeigt.
  Sicherheitscode zur Prüfung. Nur Kleinschreibung. Keine Leerzeichen.
Kommentare (4)
Re: Formular legal
15. Januar 2013
Joest Feenders

Hallo Lukas,
gewerbliche Seiten -> Google Maps API
nicht gewerbliche - so wie Deine Vereinsseite - auch ohne API.
Siehe auch:
http://www.google.com/permissions/geoguidelines.html
Alternativ kannst Du natürlich OpenStreetMap verwenden.

Formular legal?
13. Januar 2013
Lukas
Hallo,

ich finde das Formular mit Google Maps sehr gut und würde das gerne für meine Sportvereins - Website verwenden.

Allerdings liest man im Internet viel, dass es rechtlich verboten sei, Karten etc auf Homepages einzubinden. Und Google dürfe man nur mit Google Maps API verwenden.

Ist das hier vorgestellte Formular also rechtlich unbedenklich?!
Kool
14. September 2012
S.S.M
Danke für den Artikel, bleibtr mir nurnoch eine Frage offen und zwar : wie schaffe ich es das es google karte vorher schon unter dem routenplaner steht udn wenn ich mir eine route berechne sie direkt auf meiner seite in google maps angezeigt wird ?
OpenStreet Anfahrt
16. Juli 2012
Norbert
Danke für das Formular mit Google Service.
Für OpenStreet gibt es hier Info: http://wiki.openstreetmap.org/wiki/OpenRouteService
Für unsere Ferienwohnungen Haus Roseneck in Mittenwald sieht es dann so aus: http://openrouteservice.org/index.php?lon=7.1&lat=50.72&zoom=12&end=11.274609804076,47.451025698111&pref=Fastest&lang=de
 

be.bra wissenschaft - Verlagsseite
Der Internetauftritt des be.bra wissenschaft Verlages wurde von... weiter

Gmeiner Verlag gewinnt Website Award Mittelstand Baden-Württemberg 2011
Die von uns in Zusammenarbeit mit der Agentur Buchgut realisierte... weiter

Lukas Verlag (Webseite & Verlagsverwaltung)
Der »Lukas Verlag für Kunst- und Geistesgeschichte« ist ein... weiter

Lukas Verlag (Webseite & Verlagsverwaltung)