Programmierung Thomas Weise

twGmap - Directions

Google Maps mit Straßenverbindungen

von Thomas Weise ( Blog)

Auf kleinen Firmen-Websites macht es sich immer gut, seinen Firmen-Standort mit Hilfe einer Landkarte abzubilden. Um Ihren Website-Besuchern eine schnelle, unkomplizierte Methode anzubieten, verschiedene Anfahrtsstrecken zu generieren, lesen Sie diesen Artikel.

Straßenverbindung mit Angabe des Start- oder Zielpunktes (Live-Demo)

Diese Version eignet sich für die einfache Firmen-Website, in der eigentlich nur der Standort der Firma mit einem Marker auf einer Google Map dargestellt, und dem Website-Besucher eine einfache Möglichkeit geboten werden soll, einen Anfahrtsplan zu diesem Standort zu erzeugen.

Dies erfolgt für den Besucher in zwei Schritten

  1. Marker anklicken und im sich öffnenden Fenster angeben, ob man den (Marker-)Punkt als Start oder als Ziel für den Anfahrtsplan verwenden möchte (beispielsweise auf 'diesen Punkt als Zielpunkt verwenden' klicken).
    Screenshot
    Infofenster zur Auswahl, ob dies Start oder Ziel sein soll
  2. Wenn bei der vorherigen Auswahl der Marker beispielsweise als Zielpunkt ausgewählt wurde, dann muss nun noch der Startpunkt angegeben werden. Dafür genügt es meist Ortsname und Straße einzugeben. Man kann hier auch direkt die Geo-Koordinaten eingeben, oder Firmennamen und sonstige Suchbegriffe. Je nachdem, was Google kennt, wird dann angezeigt. (auf 'Straßenverbindung anzeigen' klicken nicht vergessen)
    Screenshot
    Infofenster zur Eingabe des Start- oder Ziel-Punktes

Die Anzeige der erzeugten Straßenverbindung erfolgt nun in einem neuen Browserfenster (oder in einem neuen Tab, je nach Browsereinstellung des Benutzers) und sieht beispielsweise so aus:

Screenshot
generierte Straßenverbindung (Landkarte)

Auch in Textform wird die Anfahrt ähnlich wie bei einem Routenplaner generiert, was dann beispielsweise so aussehen könnte:

Screenshot
generierte Straßenverbindung (Text)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Anleitung zum Einbau in die eigene Website

Wir verwenden wieder unsere 3 Dateien ('index.html', 'twGmap.js' und 'twGmap.css') aus den voragngegangenen Artikeln. Diesmal müssen wir nur die 'twGmap.js' bearbeiten.

Gleich oben erzeugen wir ein paar Variablen, teilweise sind diese für spätere Erweiterungen schonmal mit vorgesehen.

var directionMarkers   = [];
var directionHtmls     = [];
var directionHtmlsNach = [];
var directionHtmlsVon  = [];
var directionCount     = 0;

Dann ändern wir die Marker-Funktion ('machTwMarker01()') folgendermaßen ab

function machTwMarker01() {
  var point = new GPoint(13.748, 51.041);
  var adresse = "Rudolf Harbig Stadion";
  var marker = new GMarker(point);
  var html = machTwHtmlInfofenster(marker, adresse);
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html)});	
  	
  return marker;
}

Darin wird nun eine Funktion 'machTwHtmlInfofenster()' aufgerufen, welche wir erst noch erstellen müssen. Aufgrund ihres Umfanges, soll diese hier nicht abgebildet werden. Nur soviel: darin wird der html-Code für die verschiedenen Infofenster erzeugt und in die Variablen 'directionHtmls', 'directionHtmlsVon' und 'directionHtmlsNach' geschrieben.

function machHtmlInfofenster(marker, adresse) {
  ...
  directionHtmls[directionCount] = htmlDefault;
  ...
  directionHtmlsVon[directionCount] = htmlVon;
  ...
  directionHtmlsNach[directionCount] = htmlNach;
  ...
}

Das wars schon.

Live-Demo und Quelltexte

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Bei Fragen, Anregungen oder dergleichen schreiben Sie doch einen Kommentar in mein Blog