Hallo pyretta,
dein "handelsüblicher Code" sieht ja wie folgt aus:
HTML-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>
Versuch doch mal bitte folgendes:
1)Im Seitenlayout unter unter Head-Tags trägst du folgende Teil ein:
HTML-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>
2) Im Seitenlayout unter Body onload trägst du folgendes ein:
HTML-Code:
load(),GUnload()
3) Etweder erstellst du jetzt einModul eigner HTML-Code und bindest es entsprechend ein oder du nimmst einen Artikel und stellst es auf eigener HTML-Code ein und gibst folgende Daten ein:
HTML-Code:
<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:[nbsp]</th>
<td><input type="text" size="25" id="fromAddress" name="from"
value=""/></td>
<th align="right">[nbsp][nbsp]Zielort:[nbsp]</th>
<td align="right"><input type="text" size="25" id="toAddress" name="to"
value="25746 Heide" /></td></tr>
<tr><th>Sprachauswahl:[nbsp]</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>
<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>
Bei mir läuft es! Routenplaner wird angezeigt, dann allerdings abgebrochen, da ich keinen API-Schlüssel habe. CSS hatte ich ger nicht erstellt.
Versuchs einfach mal!
Gruß
varix
Google Maps Routenplaner einbinden
Zitieren
Zitat von satspeedy
, vielen Dank varix für deine schnelle Antwort.
)
Lesezeichen