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;
}