Anfahrt per Klick
Click search button to set the first marker.
Or click on the map to set the markers and drag them around.
To remove a marker click on the marker again.
Die Einbindung dieser Karte:
Siehe davor Voraussetzung
1. In einer HTML Seite diesen Code eingeben:
<h3>Anfahrt per Klick</h3>
<div id="map"> </div>
<div id="searchdiv">
<form name="f" action="" onsubmit="showAddress(this.from.value);return false">
<input id="search" type="text" size="38" name="from" value="Köln, Deutschland" />
<input type="submit" value="Suche" />
<input type="button" value="Karte löschen" onclick="clearMap()" />
</form>
</div>
<div id="descr">Click search button to set the first marker.
Or click on the map to set the markers and drag them around.
To remove a marker click on the marker again.
</div>
<div id="panel"> </div>
<script type="text/javascript">
//<![CDATA[
// Force SVG on also on Linux and BSD machines
if(navigator.platform.match(/linux|bsd/i)) {
_mSvgEnabled = _mSvgForced = true;
}
// Global variables
var map;
var geo;
var gdirs;
var icon_url ="http://www.google.com/intl/en_de/mapfiles/";
var gmarkers = [];
var poly;
var gpolies = [];
var firstmarker = false;
var secmarker = false;
var thirdmarker = false;
var panel = document.getElementById("panel");
/*
Icon images
starticon
icon_url + "icon-dd-play-trans.png";
pauseicon
icon_url + "icon-dd-pause-trans.png";
endicon
icon_url + "icon-dd-stop-trans.png";
*/
function addIcon(icon) { // Add icon attributes for all icons
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(24, 38);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(9, 34);
icon.infoWindowAnchor = new GPoint(19, 2);
icon.infoShadowAnchor = new GPoint(18, 25);
}
function delPolyline() { // Remove last polyline
for(var i = 0; i < gpolies.length; i++) {
map.removeOverlay(gpolies[i]);
gpolies.splice(i, 1);
}
}
function delMarker(marker) {
// Find out removed marker
for(var i = 0; i < gmarkers.length; i++) {
if(gmarkers[i] == marker) {
// Remove marker and replace marker object with blank space
map.removeOverlay(marker);
gmarkers[i] = "";
break;
}
}
}
function display() {
var points = [];
for(var i = 0; i < gmarkers.length; i++) {
if(gmarkers[i]) {
var p = gmarkers[i].getPoint();
points.push(p);
}
}
if(points.length == 2) {
waypoints(points[0], points[1]);
}
else if(points.length == 3) {
delPolyline();
// last two elements in reversed order (yellow marker is at the last
// array position, but needs to be the second point in route)
waypoints(points[0], points[2], points[1]);
}
}
function buildMap() {
map = new GMap2(document.getElementById("map"), {draggableCursor:'auto', draggingCursor:'move'});
map.setCenter(new GLatLng(50.9415187027125, 6.958465576171875), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.disableDoubleClickZoom();
gdirs = new GDirections();
GEvent.addListener(map, "click", showMarker);
GEvent.addListener(gdirs, "load", dirs);
// GEvent.addListener(gdirs, "addoverlay", dirs2);
GEvent.addListener(gdirs, "error", function() {
GLog.write("Failed: "+gdirs.getStatus().code);
});
}
function showMarker(overlay, point, noclick) {
if(noclick) {
map.setCenter(point, 14);
panel.innerHTML="";
}
if(point) {
if(firstmarker == false) { // First (green) marker
// Start icon for the first marker
var starticon = new GIcon();
starticon.image = icon_url + "icon-dd-play-trans.png";
addIcon(starticon);
var marker0 = new GMarker(point, { icon:starticon, draggable:true, bouncy:false });
map.addOverlay(marker0);
gmarkers[0] = marker0;
firstmarker = true;
if(gmarkers.length > 1) { display(); }
// Dragend listener for first (green) marker
GEvent.addListener(marker0, "dragend", function() {
// Remove old polyline
delPolyline();
// Overwrite marker0
gmarkers[0] = marker0;
// Draw new direction
if(gmarkers.length > 1) { display(); }
});
// Click listener to remove the first marker
GEvent.addListener(marker0, "click", function() {
delPolyline();
delMarker(marker0);
firstmarker = false;
// First marker has been removed
// Calculate new route if there were still markers on the map
if(secmarker && thirdmarker) { delPolyline();
waypoints(gmarkers[1].getPoint(), gmarkers[2].getPoint());
}
else {
delPolyline();
}
});
}
else if(secmarker == false) { // Second (red) marker
// End icon
var endicon = new GIcon();
endicon.image = icon_url + "icon-dd-stop-trans.png";
addIcon(endicon);
// Red marker
var marker1 = new GMarker(point, { icon:endicon, draggable:true, bouncy:false });
map.addOverlay(marker1);
gmarkers[1] = marker1;
secmarker = true;
if(gmarkers.length > 1) { display(); }
// Dragend listener for second marker
GEvent.addListener(marker1, "dragend", function() {
// Remove polylines
delPolyline();
// Overwrite marker1
gmarkers[1] = marker1;
// Draw new direction
if(gmarkers.length > 1) { display(); }
});
// Second click listener to remove second marker
GEvent.addListener(marker1, "click", function() {
delPolyline();
delMarker(marker1);
secmarker = false;
// Second marker has been removed
// Calculate new route if there were still markers on the map
if(firstmarker && thirdmarker) { delPolyline();
waypoints(gmarkers[0].getPoint(), gmarkers[2].getPoint());
}
else {
delPolyline();
}
});
}
else if(thirdmarker == false) { // Third (yellow) marker
// Pause icon
var p_icon = new GIcon();
p_icon.image = icon_url + "icon-dd-pause-trans.png";
addIcon(p_icon);
var marker2 = new GMarker(point, { icon:p_icon, draggable:true, bouncy:false });
map.addOverlay(marker2);
gmarkers[2] = marker2;
thirdmarker = true;
delPolyline();
if(gmarkers.length > 1) { display(); }
// Dragend listener for third marker
GEvent.addListener(marker2, "dragend", function() {
// Remove polylines
delPolyline();
// Overwrite marker2
gmarkers[2] = marker2;
// Draw new direction
if(gmarkers.length > 1) { display(); }
});
// Click listener to remove third marker
GEvent.addListener(marker2, "click", function() {
delPolyline();
delMarker(marker2);
thirdmarker = false;
// Third marker has been removed
// Calculate new route if there were still markers on the map
if(firstmarker && secmarker) { delPolyline();
waypoints(gmarkers[0].getPoint(), gmarkers[1].getPoint());
}
else {
delPolyline();
}
});
}
}
}
function waypoints(p1, p2, p3) {
if(!p3) {
gdirs.loadFromWaypoints([p1, p2],{ getPolyline:true, getSteps:true, locale:"de_DE" });
}
else {
gdirs.loadFromWaypoints([p1, p2, p3],{ getPolyline:true, getSteps:true,locale:"de_DE" });
}
}
function dirs() { // Callback function for directions
panel.innerHTML = "";
poly = gdirs.getPolyline();
map.addOverlay(poly);
gpolies.push(poly);
// First route from green to red marker (first case)
// or from green to yellow marker (second case)
// or from yellow to red marker (third case, not yet really examined)
var route = gdirs.getRoute(0);
if(gdirs.getNumRoutes() == 1) {
var type= "play";
}
else {
var type= "pause";
// Second route should be from yellow to red marker
var route2 = gdirs.getRoute(1);
// endpoint of route 1 is also startpoint of route 2
var startgeocode2 = route2.getStartGeocode();
var summ2 = route2.getSummaryHtml();
// Hack to get point and address of yellow marker
var yellow = gdirs.getGeocode(1);
var pausepoint = new GLatLng(yellow.Point.coordinates[1], yellow.Point.coordinates[0]);
}
// Copyright
var copy = gdirs.getCopyrightsHtml();
var startgeocode = route.getStartGeocode();
var startpoint = route.getStep(0).getLatLng();
// Length and duration
// var summ = gdirs.getSummaryHtml();
var summ = route.getSummaryHtml();
var endgeocode = route.getEndGeocode();
var endpoint = route.getEndLatLng();
if(type=="play") {
// Display start point inside of panel
panel.innerHTML = section(startpoint, startgeocode.address, summ, type);
// Display details inside of panel
for (var j = 0; j < route.getNumSteps(); j++) {
var step = route.getStep(j);
// Display step details inside the panel
panel.innerHTML += details(step.getLatLng(), j+1, step.getDescriptionHtml(), step.getDistance().html);
}
}
if(type =="pause") {
// Start point remains the same
panel.innerHTML = section(startpoint, startgeocode.address, summ, "play");
// Details don't
for (var k = 0; k < route.getNumSteps(); k++) {
var step0 = route.getStep(k);
panel.innerHTML += details(step0.getLatLng(), k+1, step0.getDescriptionHtml(), step0.getDistance().html);
}
// var pausegeocode = route2.getStartGeocode();
// var pausepoint = route2.getStep(1).getLatLng();
// Overwrite end point
var endgeocode = route2.getEndGeocode();
var endpoint = route2.getEndLatLng();
panel.innerHTML += section(pausepoint, startgeocode2.address, summ2, type);
for (var h = 0; h < route2.getNumSteps(); h++) {
var step2 = route2.getStep(h);
// Display step details inside the panel
panel.innerHTML += details(step2.getLatLng(), h+1, step2.getDescriptionHtml(), step2.getDistance().html);
}
}
// What happens if green marker was removed?
// Make sure the last point has the right icon
if(!secmarker|| !firstmarker) {
panel.innerHTML += exception(endpoint, endgeocode.address, copy);
}
else {
// Display end point and copyright inside of panel
panel.innerHTML += section(endpoint, endgeocode.address, copy, "stop");
}
}
/* Styling slightly adapted from Mike Williams
http://econym.googlepages.com/example_steps.htm */
function section(point, address, summ, type) {
var target = '"'+ 'map.showMapBlowup(new GLatLng('+point.toUrlValue(6)+'))' + '"';
var html = '<table class="icon">' +
'<tr style="cursor: pointer;" onclick='+target+'>' +
'<td style="padding:4px 15px 0 5px; vertical-align:middle;">' +
'<img src='+ '"'+ icon_url + 'icon-dd-' + type + '-trans.png"></td>' +
'<td style="vertical-align:middle;width:100%;">' +address+
'</td></tr></table>';
if(type != "stop") {
html += '<div style="text-align:right;color:#808080;">Gesamt: ' + summ + '</div>'
}
else {
html += '<div>'+ summ + '</div><br>';
}
return html;
}
function exception(point, address, copy) { //Yellow icon as last (stop) icon
var target = '"'+ 'map.showMapBlowup(new GLatLng('+point.toUrlValue(6)+'))' + '"';
var html = '<table class="icon">' +
'<tr style="cursor: pointer;" onclick='+target+'>' +
'<td style="padding:4px 15px 0 5px; vertical-align:middle;">' +
'<img src='+ '"'+ icon_url + 'icon-dd-pause-trans.png"></td>' +
'<td style="vertical-align:middle;width:100%;">' +address+
'</td></tr></table>';
html += '<div>'+ copy + '</div><br>';
return html;
}
function details(point, num, description, dist) {
var target = '"'+ 'map.showMapBlowup(new GLatLng('+point.toUrlValue(6)+'))' + '"';
var html = '<table class="details">' +
'<tr style="cursor:pointer;" onclick='+target+'>' +
'<td style="border-top:1px solid #CDCDCD; margin:0;padding:0.3em 3px;vertical-align:top; text-align:right;">' +
'<a href="javascript:void(0)">'+ num + '. </a></td>' +
'<td style="border-top:1px solid #CDCDCD;margin:0;padding:0.3em 3px;vertical-align:top;width:100%;">' + description + '</td>' +
'<td style="border-top:1px solid #CDCDCD; margin-right:1px;padding:0.3em 3px 0.3em 0.5em;vertical-align:top;text-align:right;color:#808080;">' + dist +
'</td></tr></table>';
return html;
}
function clearMap() {
map.clearOverlays();
firstmarker = secmarker = thirdmarker = false;
gmarkers.length = 0;
gpolies.length = 0;
panel.innerHTML ="";
}
// Geocoding
function showAddress(search) {
var geo = new GClientGeocoder();
if(gmarkers.length > 0) {
clearMap();
}
// Geocode the input
geo.getLocations(search, function(result) {
if(result.Status.code == 200 ) {
// In case of more than one result, ask "Meinen Sie"
if(result.Placemark.length > 1) {
panel.innerHTML = "Meinen Sie:<br>";
// Loop through the results
for(var i = 0; i < result.Placemark.length; i++) {
var p = result.Placemark[i].Point.coordinates;
var lat = p[1]; var lng = p[0];
var g_name = result.Placemark[i].address;
var found ="";
found += i+1 + ". ";
found += g_name.link("javascript:showMarker("+ null + "," +" new GLatLng(" + lat + "," +lng+ ")" + "," +true +")");
found += "<br>";
panel.innerHTML += found;
}
}
// If there was only one result
else {
panel.innerHTML = "";
var p = result.Placemark[0].Point.coordinates;
var point = new GLatLng(p[1], p[0]);
showMarker(null, point, true);
}
}
// Decode the error status
else {
var reason = result.Status.code;
alert('Could not find "'+search+ '" ' + reason);
}
});
}
window.onload = buildMap;
window.onunload = GUnload;
//]]>
</script>
<noscript>
<strong>JavaScript muss aktiviert sein um Google Maps zu nutzen.</strong> Es scheint jedoch, dass JavaScript entweder deaktiviert ist oder von Ihrem Browser nicht unterstützt wird. Um Google Maps anzuzeigen aktivieren Sie JavaScript in den Browser-Optionen und versuchen Sie es dann erneut.
</noscript>
2. In dem benutzerdefinierten CSS-Feld diesen CSS-Code eingeben:
v\:* { behavior:url(#default#VML); }
#map { position: relative;
width: 550px;
height: 400px;
border: 1px solid gray;
}
#searchdiv { position:relative;
display:block;
}
#descr { position:relative;
width: 550px;
}
#panel { position:relative;
font-size: 15px !important;
width: 550px; height: 400px;
border: 1px solid gray;
overflow: auto;
}
table.details { font-size: 0.82em;
margin:0; padding:0;
border-collapse:collapse;
}
table.icon {
border:1px solid silver;
margin:10px 0;
background-color:#f0f0f0;
border-collapse:collapse;
color:black;
}