Auf Firmen-Websites macht es sich immer gut, den Standort mit Hilfe einer attraktiven Landkarte abzubilden. Google-Maps ermöglicht Ihren Website-Besuchern eine schnelle, unkomplizierte Methode, verschiedene Anfahrtsstrecken selbst zu generieren.

Straßenverbindung mit Angabe des Start- oder Zielpunktes

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 – Live-Demo

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).
   

   Infofenster zur Auswahl, ob dies Start oder Ziel sein soll

2. Wenn bei der vorherigen Auswahl der Marker beispielsweise ‘diesen Punkt als Zielpunkt benutzen’ 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 es dann angezeigt.
   (auf ‘Straßenverbindung anzeigen’ klicken nicht vergessen)
   

   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:

generierte Straßenverbindung (Landkarte)

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

generierte Straßenverbindung (Text)

Anleitung zum Einbau in die eigene Website

Wir verwenden wieder unsere drei Dateien (‘index.html’, ‘twGmap.js’ und ‘twGmap.css’) aus den vorangegangenen 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 schon mal 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 war’s schon. ™

Live-Demo und Quelltexte

• Live-Demo
• Javascript
• Stylesheet

Thomas Weise

Thomas Weise ist gelernter Anwendungsentwickler. Ihn zog es aber immer schon in Richtung Internet und Webentwicklung. Seine Artikel auf drweb sind Gastartikel, selbst bloggt er auf

• Web
|
• More Posts (10)