Über mich

Startseite arrow Tipps & Tricks arrow Mit Google Maps Routen planen

Mit Google Maps Routen planen
Donnerstag, 13. September 2007
Geschrieben von Armin Vieweg
Viele Firmen nutzen kostenlose Angebote von z.B. Map24 um auf einer Anfahrtsbeschreibung auch ein Feld zur direkten Routenplanung anzubieten. Hier wird erklärt, wie das mit Google Maps geht und ganz ohne Anmeldung.

Es ist recht einfach. Das Prinzip ist das Gleiche wie bei der Google Suchmaschine. Über einen Parameter in einem Formular, wird zum einen die Startadresse übergeben und zum anderen die Zieladresse, wobei diese sich in einem versteckten Feld befindet und vom Webmaster vorgegeben wird.

Der Quellcode, den Ihr dafür in Eure Website ein pflegen müsst, sieht dann folgendermaßen aus:

<form name="search_route" method="get" action="http://maps.google.de/" target="_blank" accept-charset="UTF-8">
   <input name="saddr" type="text" id="saddr" value="Ihre Adresse">
   <input name="daddr" type="hidden" id="daddr" value="Zielstrasse 5a, 56588 Waldbreitbach">
   <input type="submit" name="Submit" value="Route berechnen">
</form>


Update 26.03.2010 Seit Neustem gibt es ein Problem, wenn das Formular auf einer Seite platziert wird, die nicht UTF-8 kodiert ist. Der accept-charset ist hierbei die Lösung und kann bei UTF-8 Websites raus genommen werden, schadet aber nicht. Vielen Dank an Jochen für den Hinweis (siehe auch Kommentar #9  und #10)



Im Feld saddr (Source Address) wird die Startadresse angegeben, von der aus die Route beginnt zu starten. Die Zieladresse steht bei einer Firmenseite z.B. bereits fest, die wird dann in daddr (Destination Address) fest im Quellcode niedergeschrieben, der Besucher hat darauf auch keinen Einfluss. Bei einem Klick auf "Route berechnen" öffnet sich dann ein neues Browserfenster (oder -tab) mit der berechneten Route.

Hier mal ein Beispiel, wie es auf der Internetseite aussehen könnte:

Startadresse:
z.B. Südallee 5, 56588 Waldbreitbach


Übrigens hat es Vorteile Google Maps zu verwenden, da der gleiche Code für jede Sprache genutzt werden kann. Erkennt Google einen französischen Besucher z.B. wird er ihn auf die französische Google Maps Webseite weiterleiten. Durch den Bekanntheitsgrad ist die internationale Anerkennung an Google sicherlich auch höher als bei Map24, z.B.

Dieser Tipp beinhaltet nur ein solches Feld zur Eingabe der eigenen Adresse. Wenn man einen ganzen Kartenausschnitt von Google Maps auf der eigenen Seite platzieren möchte, kann man zum einen die Google Maps API verwenden, oder diesen Tipp über den Professor Web kürzlich berichtet hat.



  Kommentare (12)
 1 Geschrieben von: Inliner, am 09.03.2008 um 16:54
Das gefällt mir. Aber, was muss dem Code noch hinzugefügt werden, damit, wenn der Benutzer in das Feld für Adresseingabe klickt, die Vorgabe "Ihre Startadresse" automatiscvh verschwindet?
 2 Geschrieben von: Armin Vieweg, am 10.03.2008 um 07:37
Da ich genau diese Funktion auch auf der Seite hier habe, nämlich rechts im Menü, hättest Du einfach von dort den Code nehmen können. 
 
Folgendes einfach noch innerhalb des Input-Feldes dazuschreiben: 
 
onblur="if(this.value=='') this.value='Ihre Adresse';" onfocus="if(this.value=='Ihre Adresse') this.value='';" 
 
 
Gruß 
Armin
 3 Geschrieben von: Inliner, am 12.03.2008 um 22:55
Danke, es hat funktioniert ! ! ! 
 
Da ich die Suchfunktion auf Deiner Seite noch nicht benutzt hatte, habe ich darauf gar nicht geachtet.
 4 Geschrieben von: ddust, am 12.08.2008 um 11:09
hi, 
super! habe allerdings noch eine frage. 
das formular würde ich gerne in meine firmenhomepage einbinden. 
ist dies erlaubt? vorallem von google?
 5 Geschrieben von: Armin Vieweg, am 12.08.2008 um 12:16
Hi ddust. 
Da kannst Du ganz beruhigt sein, Google erlaubt dies. 
 
Im Prinzip ist es ja nichts anderes als ein Dynamischer Link zu Google selbst. Und ein Link zu Google darf man auch ohne Bedenken setzen. 
 
Du kopierst hier ja keine Funktionen und verkaufst sie als deine Eigenen - so gesehen: alles in Butter :) 
 
Gruß 
Armin
 6 Geschrieben von: Christian, am 10.08.2009 um 19:34
Super! Vielen Dank, hat sehr geholfen
 7 Geschrieben von: Eduard Seifert, am 09.09.2009 um 03:08
Vielen Dank für das Snippet. Klein und fein. :-)
 8 Geschrieben von: Micha, am 06.10.2009 um 09:00
Herzlichen dank, benutze den Schnipsel nun ebenfalls auf einer Seite.
 9 Geschrieben von: Jochen, am 25.03.2010 um 17:50
Seit neuestem geht eure/diese Funktion auf meiner Seite nicht mehr. Haben die bei Google irgendwas an der Übergabemethode geändert? Weiß jemand was?
 10 Geschrieben von: Armin Vieweg, am 26.03.2010 um 12:57
Hallo Jochen, 
 
die Lösung ist ganz einfach =D 
 
Das Problem tritt nur dann auf, wenn das Formular auf einer Internetseite platziert wurde, die nicht UTF-8 kodiert ist. Der Browser wandelt unsere eingegebenen Werte mit URI-Encode und Google Maps hat damit ein Problem. 
 
Einfach im Formular-Tag folgendes Attribut und Wert hinzufügen: 
accept-charset="UTF-8" 
 
Und schon klappt es wieder. 
Seiten die bereits UTF-8 sind machen hier keine Probleme mehr. 
 
Vielen Dank Jochen, für den Hinweis. 
Ich habe den Artikel entsprechend aktualisiert. 
 
Gruß 
Armin 
 
P.S. @Jochen Hast recht, der Code wird entfernt in Kommentaren. Aber demnächst kommt ja was neues =D
 11 Geschrieben von: ALey, am 03.08.2011 um 10:39
Hey, eine frage gibt es auch so ein Formular mit mehreren Eingabefelder sprich. Straße, Ort, PLZ?
 12 Geschrieben von: Armin, am 03.08.2011 um 12:57
Hey, 
nicht das ich wüsste! Das würde bei Google die Möglichkeit erfordern, dass es mehrere Felder gibt. 
 
Was man machen könnte, bei dem Submit-Event des Formulars alle Felder (Straße, PLZ, Ort) zu einem zusammenfassen und das dann Google zu übermitteln. Das könnte man mit JavaScript recht einfach bewerkstelligen. 
 
Gruß 
~Armin
Letzte Aktualisierung ( Freitag, 26. März 2010 )
 
< Zurück   Weiter >



Tipps & Tricks Kategorien

Beliebteste Tipps