28.05.2009, 13:18
|
 #1 (permalink)
|
|
Administrator
Registriert seit: 19.03.2009
Ort: Heide Holstein
Beiträge: 1.818
 |
Routenplaner mit GoogleMaps-Api einbinden
Viele Webseiten nutzen einen externen Routenplaner um die Anreise z.B. zu einer Ferienwohnung zu planen. Der Besucher wird auf eine andere Webseite geleitet, was unschön aussieht und nicht professionell wirkt. Hier stellen wir ein Lösung mit der Googlemaps-Api vor. Den API-Key gibts hier.
Beispiel: http://www.webtodateforum.de/tipps-u...oogle-maps.php Einfach einen HTML Absatz mit folgendem Inhalt erstellen und ein wenig anpassen: Code:
<script src="http://maps.google.com/maps?file=api&v=2&key=1234" type="text/javascript"></script> <style type="text/css"> v\:* { behavior:url(#default#VML); } table.directions th { background-color:#888888; } img { color: #000000; } </style> <script type="text/javascript"> //<![CDATA[ var map; var gdir; var geocoder = null; var addressMarker; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); gdir = new GDirections(map, document.getElementById("directions")); GEvent.addListener(gdir, "load", onGDirectionsLoad); GEvent.addListener(gdir, "error", handleErrors); setDirections("25746 Heide", "München", "de"); } } function setDirections(fromAddress, toAddress, locale) { gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale }); } function handleErrors(){ if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS) alert("Es wurde kein entsprechender Ort zu Ihrer Routenberechnung gefunden!\nError code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_SERVER_ERROR) alert("Leider konnte keine Route berechnet werden!\n Error code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_MISSING_QUERY) alert("Der HTTP q Parameter fehlt oder hat keinen Inhalt!\n Error code: " + gdir.getStatus().code); // else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong // alert("Der Geocode für die angegebene Adresse ist fehlerhaft.\n Error code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_BAD_KEY) alert("Der angegeben API Key ist für eine andere Domain. \n Error code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_BAD_REQUEST) alert("Leider ist ein Fehler bei der Routenberechnung aufgetreten.\n Error code: " + gdir.getStatus().code); else alert("Ein unbekannter Fehler trat auf!"); } function onGDirectionsLoad(){ } //]]> </script> <body onload="load()" onunload="GUnload()"> <h2>So könnte Ihr Routenplaner aussehen:</h2> <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false"> <table> <tr><th align="right">Start: </th> <td><input type="text" size="25" id="fromAddress" name="from" value=""/></td> <th align="right"> Zielort: </th> <td align="right"><input type="text" size="25" id="toAddress" name="to" value="25746 Heide" /></td></tr> <tr><th>Sprachauswahl: </th> <td colspan="3"><select id="locale" name="locale"> <option value="de" selectet>Deutsch</option> <option value="en">English</option> <option value="fr">French</option> <option value="it">Italian</option> <option value="eu">Basque</option> <option value="nl">Dutch</option> </select> <input name="submit" type="submit" value="Routenplanung" /> </td></tr> </table> </form> <br/> <table class="directions"> <tr><th>Hier gehts lang:</th><th>Map</th></tr> <tr> <td valign="top"><div id="directions" style="width: 275px"></div></td> <td valign="top"><div id="map" style="width: 310px; height: 400px"></div></td> </tr> </table> |
|
|
|
29.05.2009, 10:05
|
#3 (permalink) |
|
Moderator
Registriert seit: 17.04.2009
Ort: Regensburg
Beiträge: 2.361
|
AW: Routenplaner mit GoogleMaps-Api einbinden
Hallo blue, ist es möglich auch kleinere Orte suchen zu lassen? zB. Thalmassing wird nicht gefunden, aber Bad Abbach schon! Ich denke dabei an Fußballvereine die oft zu solchen Dörfern fahren müssen! Ansonsten ist das mit das besste was ich gesehen habe... super Idee, Klasse
|
|
|
|
|
29.05.2009, 20:27
|
#6 (permalink) |
|
Moderator
Registriert seit: 17.04.2009
Ort: Regensburg
Beiträge: 2.361
|
AW: Routenplaner mit GoogleMaps-Api einbinden
Hallo blue ich habe es zum Test mal bei mir eingebaut...
Schau es dir mal an... wie kann ich die (Map Spalte) oberhalb und (hier geht´s lang, Spalte) unterhalb mittig anordnen? web to date Geändert von voodoo36 (20.07.2009 um 07:00 Uhr) |
|
|
|
|
29.05.2009, 21:41
|
#7 (permalink) |
|
Neuer Benutzer
Registriert seit: 26.05.2009
Ort: Aalen
Beiträge: 7
|
AW: Routenplaner mit GoogleMaps-Api einbinden
Hallo,
bei mir zeigt es die Map nicht bei Map an sondern unterhalb...? Was muss ich da genau im HTML anpassen? Sorry, bin absoluter Neuling. Grüße aus Aalen |
|
|
|
|
29.05.2009, 22:04
|
#8 (permalink) |
|
Neuer Benutzer
Registriert seit: 23.03.2009
Beiträge: 19
|
AW: Routenplaner mit GoogleMaps-Api einbinden
Deine Seite ist sicher nicht breit genug
<td valign="top"><div id="directions" style="width: 275px"></div></td> <td valign="top"><div id="map" style="width: 310px; height: 400px"></div></td> |
|
|
|
 |
| Lesezeichen |
| Stichworte |
| anfahrt, google maps, routenplaner |
| Themen-Optionen | Thema durchsuchen |
| Ansicht | |
Linear-Darstellung
|
|
LinkBacks (?)
LinkBack to this Thread: http://www.webtodateforum.de/forum/web-to-date-allgemein/101-routenplaner-mit-googlemaps-api-einbinden.html
|
||||
| Erstellt von | For | Type | Datum | Hits |
| Gelöst: - Marker von Google Maps werden nicht angezeigt - Seite 2 - Joomla CMS Support Forum | This thread | Refback | 09.01.2010 20:32 | 10 |
| Web to Date Forum - Routenplaner mit Google Maps für Web to Date | This thread | Refback | 29.12.2009 09:56 | 14 |
| Marker von Google Maps werden nicht angezeigt - Seite 2 - Joomla CMS Support Forum | This thread | Refback | 29.09.2009 21:33 | 10 |
| Web to Date Forum - Routenplaner mit Google Maps für Web to Date | This thread | Refback | 11.08.2009 06:40 | 36 |