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>