Geben Sie die Startadresse ein oder klicken Sie auf der Karte.
Geben Sie die Ankunftsadresse oder klicken Sie auf der Karte.
Ziehen Sie die Marker auf den Zwischenstationen.

  • Geben Sie die Startadresse ein oder klicken Sie auf der Karte.
    Die Startadresse (Strasse Nummer, PLZ Stadt) können Sie entweder in dem Feld eingeben oder auf der Karte klicken (u. U. die Karte verschieben und zoomen).
  • Die Ankunftsadresse (Strasse Nummer, PLZ Stadt) können Sie entweder in dem Feld eingeben oder auf der Karte klicken (u. U. die Karte verschieben und zoomen).
  • Drei inaktiven Zwischenmarker werden erscheinen.
  • Wenn Sie einen inaktiven Zwischenmarker verschieben, wird er aktiv.
  • Sie könenn auch den Start und Endmarker verschieben.
  • Wenn Sie "Berechne die Route mit Google maps" anklicken, öffnet sich maps.google.com in einem neuen Fenster und die Route wird berechnet. Die aktiven Zwischenmarker werden berücksichtigt. Die inaktiven werden nicht beachtet.
  • Nicht immer kann maps.google.com eine brauchbare Route finden. Sie haben da die Möglichkeit alle Marker zu verschieben.
  • Neue Zwischenmarker in maps.google.com können Sie nicht einfügen. Dafür müssen Sie das maps.google.com Fenster schliessen und von hier einen Zwischenmarker durch verschieben aktivieren.

Die Einbindung dieser Karte:

Siehe davor Voraussetzung

1. In einer HTML Seite diesen Code eingeben:

<div id="map" style="margin:auto; width: 650px; height: 500px">
	<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>
</div>
<br />

<div id="start">Geben Sie die Startadresse ein oder klicken Sie auf der Karte.
	<form onsubmit="showAddress(); return false">
		<input id="search" size="60" type="text" value="" />
		<input type="submit" value="Suche Startadresse" />
	</form>
</div>

<div id="end">Geben Sie die Ankunftsadresse oder klicken Sie auf der Karte.
	<form onsubmit="showAddress(); return false">
		<input id="search2" size="60" type="text" value="" />
		<input type="submit" value="Suche Ankunftsadresse" />
	</form>
</div>

<div id="drag">Ziehen Sie die Marker auf den Zwischenstationen.
	<div id="link"> </div>
</div>

<br />

<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) { 

  var map = new GMap(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(51.09,10.02),6)
  
  // ====== Create a Client Geocoder ======
  var geo = new GClientGeocoder(new GGeocodeCache()); 

  // ====== Array for decoding the failure codes ======
  var reasons=[];
  reasons[G_GEO_SUCCESS]            = "Success";
  reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
  reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
  reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
  reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
  reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
  reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";

  
  // ====== Geocoding ======
  function showAddress() {
    if (state==0) {
      var search = document.getElementById("search").value;
      addresses[0] = search;
    }
    if (state==1) {
      var search = document.getElementById("search2").value;
      addresses[4] = search;
    }
    geo.getLatLng(search, function (point)
      { 
        if (point) {
          if (state==1) {doEnd(point)}
          if (state==0) {doStart(point)}
        }
        else {
          var result=geo.getCache().get(search);
          if (result) {
            var reason="Code "+result.Status.code;
            if (reasons[result.Status.code]) {
              reason = reasons[result.Status.code]
            }
          } else {
            var reason = "";
          } 
          alert('Could not find "'+search+ '" ' + reason);
        }
      }
    );
  }

  function swapMarkers(i) {
    map.removeOverlay(gmarkers[i]);
    createMarker(path[i],i,icon2);
  }

  var baseIcon = new GIcon(G_DEFAULT_ICON);
  baseIcon.iconSize=new GSize(24,38);

  var icon1 = new GIcon(baseIcon,"http://maps.google.com/mapfiles/icon-dd-play-trans.png");
  var icon2 = new GIcon(baseIcon,"http://maps.google.com/mapfiles/icon-dd-pause-trans.png");
  var icon3 = new GIcon(baseIcon,"http://maps.google.com/mapfiles/icon-dd-stop-trans.png");
  var icon4 = new GIcon(baseIcon,"http://labs.google.com/ridefinder/images/mm_20_white.png");
      icon4.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
      icon4.iconSize = new GSize(12, 20);
      icon4.shadowSize = new GSize(22, 20);
      icon4.iconAnchor = new GPoint(6, 20);
      icon4.infoWindowAnchor = new GPoint(5, 1);


  function createMarker(point,i,icon) {
    var marker = new GMarker(point, {draggable:true,icon:icon});
    gmarkers[i]=marker;
    GEvent.addListener(marker, "dragend", function() {
      path[i] = marker.getPoint();
      if (!active[i]) {
        setTimeout('swapMarkers('+i+')', 1000);
      }
      active[i] = true;
      addresses[i] = "";
      makeLink();
    });
    map.addOverlay(marker);
  }
  

  // ===== Array to contain the points of the path =====
  var path = [];
  var active = [true,false,false,false,true];
  var gmarkers = [];
  var addresses = [];

  // ===== State Driven Processing =====
  var state = 0;

  function handleState() {
    if (state == 0) {
      document.getElementById("start").style.display = "block";
      document.getElementById("end").style.display = "none";
      document.getElementById("drag").style.display = "none";
    }
    if (state == 1) {
      document.getElementById("start").style.display = "none";
      document.getElementById("end").style.display = "block";
      document.getElementById("drag").style.display = "none";
    }
    if (state == 2) {
      document.getElementById("start").style.display = "none";
      document.getElementById("end").style.display = "none";
      document.getElementById("drag").style.display = "block";
    }                                                       
  }

  handleState();

  GEvent.addListener(map, "click", function(overlay,point) {
    if (point) {
      if (state == 1) { doEnd(point) }
      if (state == 0) { doStart(point) }
    }
  });

  function doStart(point) {
    createMarker(point,0,icon1);
    path[0] = point;
    state = 1;
    handleState();
  }

  function doEnd(point) {
    createMarker(point,4,icon3);
    path[4] = point;
    state = 2;
    handleState();
    for (var i=1; i<4; i++) {
      var lat = (path[0].lat()*(4-i) + path[4].lat()*i)/4;
      var lng = (path[0].lng()*(4-i) + path[4].lng()*i)/4;
      var p = new GLatLng(lat,lng);
      createMarker(p,i,icon4);
      path[i] = p;
    }
    makeLink();
  }

  function makeLink() {
    var a = '<a href="http://maps.google.com/maps?saddr=' + path[0].toUrlValue();
    if (addresses[0] != "") {
      a += "("+addresses[0]+")";
    }
    var b = path[4].toUrlValue();
    if (addresses[4] != "") {
      b += "("+addresses[4]+")";
    }
    for (var i=3; i>0; i--) {
      if (active[i]) {
        b = path[i].toUrlValue() +"+to:+"+b;
      }
    }
    var c = '" target="_new">Berechne die Route mit Google maps</a>';
    document.getElementById("link").innerHTML = a+"&daddr="+b+c;
  }
}

// display a warning if the browser was not compatible
else {
  alert("Google Maps API ist nicht kompatibel mit diesem Browser.");
}
window.onunload = GUnload;
//]]>
</script>