Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Thomas Weise 23. Oktober 2008

Google Maps mit Straßenverbindungen

Kein Beitragsbild

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.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

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.

Anzeige

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

    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

    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)

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)

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

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

4 Kommentare

  1. Ich bin gespannt wann es Google Maps mit Internetanbindung in Navigationssystemen gibt. Kombiniert mit Adressenabfrage direkt über das Internet wird dies denke ich die Zukunft von Navigationssystemen sein. Das Navigationssystem wird dann eher eine Zusatzfunktion zum eigentlichen Informationssystem mit Internetanbindung sein.

  2. Eine schnelle und praktische Lösung für die eigene Homepage – wiedereinmal von Google, wen wundert es, dass dieser Dienst kostenlos ist und auch noch in Blogs kostenlos bekannt gemacht wird. Ein Markenzeichen für perfekte Geschäftsstrategien!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.