Directions-Dienst

Übersicht

Sie können Wegbeschreibungen (unter Verwendung verschiedenster Verkehrsmittel) berechnen, indem Sie das Objekt DirectionsService verwenden. Das Objekt kommuniziert mit dem Google Maps API Directions-Dienst, der Wegbeschreibungsanforderungen empfängt und berechnete Ergebnisse zurückgibt. Sie können diese Wegbeschreibungsergebnisse selbst verarbeiten oder das Objekt DirectionsRenderer verwenden, um die Ergebnisse wiederzugeben.

Sie können den Startpunkt oder Zielort einer Wegbeschreibungsanforderung in Form einer Zeichenfolge (z. B. „Chicago, IL“ oder „Darwin, NSW, Australien“), eines Wertes LatLng oder als Objekt google.maps.Place angeben.

Der Directions-Dienst kann mehrteilige Wegbeschreibungen ausgeben, wenn eine Reihe von Wegpunkten angegeben wird. Wegbeschreibungen werden als Polylinie dargestellt, die eine Route auf einer Karte zieht, oder zusätzlich als Reihe von Textbeschreibungen in einem Element <div> (z. B. „Biegen Sie rechts auf die Auffahrt der Williamsburg Bridge ein“).

Erste Schritte

Bevor Sie den Directions-Dienst in der Google Maps JavaScript API verwenden, müssen Sie sicherstellen, dass die Google Maps Directions API in der Google API Console im gleichen Projekt, das Sie für die Google Maps JavaScript API eingerichtet haben, aktiviert ist.

So zeigen Sie die Liste der aktivierten APIs an:

1. Navigieren Sie zu Google API Console.
2. Klicken Sie auf die Schaltfläche Select a project, wählen Sie das Projekt aus, das Sie für die Google Maps JavaScript API eingerichtet haben, und klicken Sie auf Open.
3. Suchen Sie in der Liste der APIs im Dashboard nach Google Maps Directions API.
4. Wenn die API in der Liste angezeigt wird, sind Sie startbereit. Wenn die API nicht in der Liste enthalten ist, aktivieren Sie sie:
   1. Wählen Sie oben auf der Seite ENABLE API aus, um den Tab Library anzuzeigen. Alternativ können Sie im Menü auf der linken Seite Library auswählen.
   2. Suchen Sie nach Google Maps Directions API und wählen Sie den Eintrag dann in der Ergebnisliste aus.
   3. Wählen Sie ENABLE aus. Nachdem der Vorgang abgeschlossen ist, wird die Google Maps Directions API in der Liste der APIs im Dashboard angezeigt.

Nutzungsbeschränkungen und Richtlinien

Kontingente

Folgende Nutzungsbeschränkungen gelten für den Directions-Dienst:

Verwendung des Directions-Diensts mit dem Standard Plan

• 2.500 kostenlose Anforderungen pro Tag, berechnet als Summe der clientseitigen und serverseitigen Abfragen; Abrechnung aktivierenaktivieren Sie die Abrechnung, um ein höheres Tageskontingent zu erhalten. Bei maximal 100.000 Anforderungen pro Tag werden 0,50 USD für 1000 weitere Anforderungen in Rechnung gestellt.
• Bis zu 23 Wegpunkte pro Anforderung, plus Startort und Zielort.
• 50 Anforderungen pro Sekunde, berechnet als Summe der clientseitigen und serverseitigen Abfragen.

Verwendung des Directions-Diensts mit dem Premium Plan

• Übergreifendes kostenloses Tageskontingent von 100.000 Anforderungen pro 24 Stunden; weitere Anforderungen werden auf die für jeweils ein Jahr erworbenen Maps APIs Credits angerechnet.
• Pro Anforderung sind maximal 23 Wegpunkte (zuzüglich Ausgangs- und Zielort) zulässig.
• Unbegrenzt clientseitige Anforderungen pro Sekunde, pro Projekt. Beachten Sie, dass die serverseitige API auf 50 Anforderungen pro Sekunde beschränkt ist.

Richtlinien

Die Nutzung des Directions-Diensts muss im Einklang mit den für die Google Maps Directions API beschriebenen Richtlinien erfolgen.

Wegbeschreibungsanforderungen

Der Zugriff auf den Directions-Dienst erfolgt asynchron, da dazu der Aufruf eines externen Servers durch Google Maps API erforderlich ist. Aus diesem Grund müssen Sie eine Callbackmethode übergeben, die bei Abschluss der Anforderung ausgeführt werden soll. Das Ergebnis wird mit der Callbackmethode verarbeitet. Beachten Sie, dass der Directions-Dienst mehrere Reiserouten als ein Array einzelner Routen (routes[]) zurückgeben kann.

Um Wegbeschreibungen in Google Maps JavaScript API zu verwenden, erstellen Sie ein Objekt vom Typ DirectionsService, und rufen Sie DirectionsService.route() auf, um die Anforderung an den Directions-Dienst zu initiieren und ein Objektliteral DirectionsRequest zu übergeben, das die Eingabebedingungen und eine Callbackmethode enthält, die bei Eingang der Antwort ausgeführt wird.

Das Objektliteral DirectionsRequest enthält folgende Felder:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

Diese Felder werden nachfolgend erläutert:

• origin (erforderlich): gibt den Startpunkt an, von dem aus die Wegbeschreibungen berechnet werden. Dieser Wert kann als Zeichenfolge (String) angegeben werden (z. B. „Chicago, IL“), als Wert LatLng oder als Objekt google.maps.Place. Wenn Sie ein Objekt google.maps.Place verwenden, können Sie eine Orts-ID, eine Abfragezeichenfolge oder eine Ortsangabe LatLng angeben. Sie können Orts-IDs von den Geocoding-, Place Search- und Place Autocomplete-Diensten in Google Maps JavaScript API abrufen. Ein Beispiel, in dem Orts-IDs aus der Autovervollständigung von Orten verwendet werden, finden Sie unter Autovervollständigung von Orten und Wegbeschreibungen.
• destination (erforderlich): gibt den Endpunkt an, zu dem die Wegbeschreibungen berechnet werden. Die Optionen entsprechen den Optionen des oben beschriebenen Felds origin.
• travelMode (erforderlich) gibt das Verkehrsmittel an, auf dem die Berechnung der Wegbeschreibung basieren soll. Die gültigen Werte sind unten im Abschnitt Verkehrsmittel angegeben.
• transitOptions (optional) gibt Werte an, die nur für Anforderungen gelten, bei denen travelMode gleich TRANSIT ist. Zulässige Werte sind im Abschnitt Optionen für öffentliche Verkehrsmittel weiter unten erläutert.
• drivingOptions (optional) gibt Werte an, die nur für Anforderungen gelten, bei denen travelMode gleich DRIVING ist. Zulässige Werte sind im nachfolgenden Abschnitt Optionen für Kraftfahrzeuge erläutert.

• unitSystem (optional) gibt an, welches Einheitensystem für die Anzeige der Ergebnisse verwendet werden soll. Die gültigen Werte sind unten im Abschnitt Einheitensysteme angegeben.

• waypoints[] (optional): gibt ein Array von Wegpunkten (DirectionsWaypoint) an. Wegpunkte sind bestimmte Orte, über die die Route geführt wird. Ein Wegpunkt ist als Objektliteral mit den nachfolgenden Feldern definiert.

  • location gibt den Standort des Wegpunktes als Wert LatLng definiert, als Objekt google.maps.Place oder als Zeichenfolge (String), die geocodiert wird.
  • stopover ist ein Boolescher Wert, der angibt, dass der Wegpunkt eine Unterbrechung der Route darstellt, was dazu führt, dass die Route in zwei Routen aufgeteilt wird.

  (Weitere Informationen zu Wegpunkten finden Sie unten im Abschnitt Verwendung von Wegpunkten in Routen.)

• optimizeWaypoints (optional) gibt an, dass sich die Route, die die angegebenen Wegpunkte verwendet, durch eine effizientere Anordnung der Wegpunkte optimieren lässt. Ist dieser Wert auf true gesetzt, werden vom Directions-Dienst die neu angeordneten Wegpunkte (waypoints) in einem Feld waypoint_order zurückgegeben. (Weitere Informationen finden Sie nachfolgend unter Verwendung von Wegpunkten in Routen.)
• provideRouteAlternatives (optional): ist dieser Wert auf true gesetzt, kann der Directions-Dienst in der Antwort mehr als eine Streckenalternative ausgeben. Beachten Sie jedoch, dass die Angabe von Alternativen die Antwortzeit des Servers verlängern kann.
• avoidHighways (optional): ist dieser Wert auf true gesetzt, bedeutet dies, dass für die berechnete Route größere Autobahnen nach Möglichkeit zu vermeiden sind.
• avoidTolls (optional): ist dieser Wert auf true gesetzt, bedeutet dies, dass für die berechnete Route Straßen, für die Mautgebühren anfallen, nach Möglichkeit zu vermeiden sind.
• region (optional): gibt den Regionscode als zweistelligen Ländercode der Top-Level-Domain (ccTLD) an. Weitere Informationen finden Sie unter Anforderung mit Regionsangabe.

Nachfolgend ist ein Beispiel für DirectionsRequest aufgeführt:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Verkehrsmittel

Bei der Berechnung von Wegbeschreibungen müssen Sie das zu verwendende Verkehrsmittel angeben. Folgende Verkehrsmittel werden derzeit unterstützt:

• DRIVING (Standardeinstellung): Wegbeschreibungen unter Verwendung des Straßennetzes.
• BICYLING: Wegbeschreibungen unter Verwendung von Radwegen und bevorzugten Straßen.
• TRANSIT: Wegbeschreibungen unter Verwendung von öffentlichen Verkehrsmitteln.
• WALKING: Wegbeschreibungen unter Verwendung von Fußwegen (sofern verfügbar).

In welchem Umfang in einem Land die jeweiligen Wegbeschreibungen unterstützt werden, entnehmen Sie den Google Maps-Abdeckungsdaten. Wenn Sie Wegbeschreibungen für eine Region anfordern, in der die jeweilige Art der Wegbeschreibung nicht unterstützt wird, wird die Antwort DirectionsStatus="ZERO_RESULTS„ zurückgegeben.

Wegbeschreibungen für Fußgänger umfassen gegebenenfalls auch andere Wege als Fußwege; in diesem Fall werden Warnungen in DirectionsResult zurückgegeben, die Sie dem Benutzer anzeigen müssen, sofern Sie nicht die Standardwiedergabe DirectionsRenderer verwenden.

Optionen für öffentliche Verkehrsmittel

Die verfügbaren Optionen für eine Wegbeschreibungsanforderung kann abhängig vom Verkehrsmittel variieren. Bei der Anforderung von Wegbeschreibungen für öffentliche Verkehrsmittel werden die Optionen avoidHighways, avoidTolls, waypoints[] und optimizeWaypoints ignoriert. Sie können spezielle Routenplanungsoptionen für öffentliche Verkehrsmittel über das Objektliteral TransitOptions definieren.

Wegbeschreibungen für öffentliche Verkehrsmittel sind zeitsensitiv. Wegbeschreibungen werden nur für Zeiträume in der Zukunft zurückgegeben.

Das Objektliteral TransitOptions enthält folgende Felder:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

Diese Felder werden nachfolgend erläutert:

• arrivalTime (optional): Gibt die gewünschte Ankunftszeit als Objekt Date an. Wenn die Ankunftszeit angegeben ist, wird die Abreisezeit ignoriert.
• departureTime (optional): Gibt die gewünschte Abreisezeit als Objekt Date an. Die Abreisezeit (departureTime) wird ignoriert, wenn arrivalTime angegeben ist. Der Standardwert „jetzt“ (d. h. die aktuelle Zeit) wird verwendet, wenn kein Wert für departureTime oder arrivalTime angegeben ist.
• modes[] (optional) ist ein Array mit einem oder mehreren Objektliteralen TransitMode. Dieses Feld kann nur angegeben werden, wenn die Anforderung einen API-Schlüssel enthält. Jedes Feld TransitMode gibt ein oder mehrere bevorzugte öffentliche Verkehrsmittel an. Folgende Werte sind zulässig:
  • BUS gibt an, dass für die berechnete Route Busse bevorzugt werden sollen.
  • RAIL gibt an, dass für die berechnete Route Züge, Straßenbahnen, Stadtbahnen und U-Bahnen bevorzugt werden sollen.
  • SUBWAY gibt an, dass für die berechnete Route die U-Bahn bevorzugt werden soll.
  • TRAIN gibt an, dass für die berechnete Route Züge bevorzugt werden sollen.
  • TRAM gibt an, dass für die berechnete Route Straßenbahnen und Stadtbahnen bevorzugt werden sollen.
• routingPreference (optional): gibt Präferenzen für Routen mit öffentlichen Verkehrsmitteln an. Mit dieser Option können Sie die zurückgegebenen Optionen beeinflussen, anstatt die von der API ausgewählte beste Standardroute übernehmen zu müssen. Dieses Feld kann nur angegeben werden, wenn die Anforderung einen API-Schlüssel enthält. Folgende Werte sind zulässig:
  • FEWER_TRANSFERS gibt an, dass die Route eine möglichst geringe Anzahl von Umstiegen enthalten soll.
  • LESS_WALKING gibt an, dass die Route möglichst wenige Abschnitte einbeziehen soll, die zu Fuß zurückgelegt werden müssen.

Nachstehend finden Sie ein Beispiel für DirectionsRequest mit öffentlichen Verkehrsmitteln.

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Optionen für Kraftfahrzeuge

Sie können Routenoptionen für Kraftfahrzeuge mit dem Objekt DrivingOptions vorgeben. Sie müssen beim Laden der API eine Google Maps APIs Premium Plan-Client-ID angeben, wenn Sie ein Feld drivingOptions zu DirectionsRequest hinzufügen möchten.

Im Objekt DrivingOptions sind die folgenden Felder enthalten:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Diese Felder werden nachfolgend erläutert:

• departureTime (erforderlich, damit das Objektliteral drivingOptions zulässig ist): gibt die gewünschte Abreisezeit als Objekt Date an. Dieser Wert muss als aktueller oder zukünftiger Zeitpunkt festgelegt werden. Der Wert kann nicht in der Vergangenheit liegen. (In der API werden alle Datums- und Zeitangaben in UTC umgerechnet, um eine einheitliche Verarbeitung in allen Zeitzonen sicherzustellen.) Wenn Sie departureTime zur Anforderung hinzufügen, wird von der API für Google Maps APIs Premium Plan-Kunden die beste Route hinsichtlich der erwarteten Verkehrsbedingungen zum jeweiligen Zeitpunkt zurückgegeben. Die vorhergesagte Reisedauer (duration_in_traffic) ist Teil der zurückgegebenen Antwort. Wenn Sie keine Abreisezeit angeben (wenn also drivingOptions nicht in der Antwort enthalten ist), ist die zurückgegebene Route eine generell geeignete Route ohne Berücksichtigung der Verkehrsbedingungen.
• traffic_model (optional): gibt an, welche Annahmen bei der Berechnung der Reisedauer zugrunde gelegt werden sollen. Diese Einstellung beeinflusst den im Feld duration_in_traffic zurückgegebenen Wert. Er enthält die voraussichtliche Reisedauer basierend auf zurückliegenden Durchschnittswerten. Der Standardwert ist bestguess. Folgende Werte sind zulässig:
  • bestguess (Standardeinstellung) gibt an, dass der für duration_in_traffic zurückgegebene Wert die bestmögliche Einschätzung der Verkehrsbedingungen auf der Grundlage von Werten aus Vergangenheit und Gegenwart darstellen soll. Dabei werden Werte aus der Gegenwart stärker berücksichtigt, je näher departure_time am Zeitpunkt „jetzt“ liegt.
  • pessimistic gibt an, dass der für duration_in_traffic zurückgegebene Wert höher als die tatsächliche Reisezeit an den meisten Tagen sein soll. Einzelne Tage mit besonders schlechten Verkehrsbedingungen können diesen Wert überschreiten.
  • optimistic gibt an, dass der für duration_in_traffic zurückgegebene Wert niedriger als die tatsächliche Reisezeit an den meisten Tagen sein soll. Einzelne Tage mit besonders guten Verkehrsbedingungen können diesen Wert unterschreiten.

Nachfolgend ist ein Beispiel für DirectionsRequest für Wegbeschreibungen mit Kraftfahrzeug aufgeführt:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

Einheitensysteme

Standardmäßig werden Wegbeschreibungen mit dem im Ausgangsort gültigen Einheitensystem berechnet und angezeigt. (Hinweis: Für Ausgangsorte, die mithilfe von Breiten-/Längenkoordinaten und nicht als Adresse ausgedrückt werden, erfolgt die Angabe standardmäßig in metrischen Einheiten.) So wird die Länge der Strecke von Chicago, IL, nach Toronto, ONT, in Meilen, die Länge der umgekehrten Strecke jedoch in Kilometern angezeigt. Sie können dieses Einheitensystem außer Kraft setzen, indem Sie in der Anforderung explizit ein bestimmtes System festlegen. Übergeben Sie dazu einen der folgenden Werte UnitSystem:

• UnitSystem.METRIC: Das metrische System wird verwendet. Entfernungen werden in Kilometern angegeben.
• UnitSystem.IMPERIAL: Das angloamerikanische System wird verwendet. Entfernungen werden in Meilen angegeben.

Hinweis: Dieses Einheitensystem beeinflusst nur den Text, der dem Benutzer angezeigt wird. Das Ergebnis der Wegbeschreibungen enthält außerdem Entfernungswerte, die dem Benutzer nicht angezeigt werden, diese werden immer in Metern ausgedrückt.

Anforderung mit Regionsangabe für Wegbeschreibungen

Mit dem Google Maps API Directions-Dienst werden Ergebnisse zurückgegeben, die durch die Domäne (Region oder Land) beeinflusst werden, in der Sie die JavaScript Bootstrap-URL geladen haben. (Da die meisten Benutzer https://maps.google.com/ laden, sind die USA als implizite Domäne festgelegt.) Wenn Sie die Bootstrap-ULR von einer anderen unterstützten Domäne aus laden, erhalten Sie Ergebnisse, die von dieser Domäne beeinflusst werden. So können beispielsweise für die Suche nach „San Francisco“ von Anwendungen, die https://maps.google.com/ (USA) laden, andere Ergebnisse zurückgegeben werden als von Anwendungen, die http://maps.google.es/ (Spanien) laden.

Verwenden Sie den Parameter region, um den Directions-Dienst auf eine bestimmte Region ausgerichtete Ergebnisse zurückgeben zu lassen. Dieser Parameter verwendet einen Regionscode, ausgedrückt als IANA-Sprach-Subtag region. In den meisten Fällen sind diese Tags direkt dem zweistelligen Ländercode der Top-Level-Domain (ccTLD) zugeordnet, z. B. wie „uk“ in „co.uk“. In einigen Fällen werden vom Tag region auch Codes gemäß ISO-3166-1 unterstützt, die sich von ccTLD-Werten unterscheiden können (z. B. „GB“ für „Großbritannien“).

In welchem Umfang in einem Land die jeweiligen Wegbeschreibungen unterstützt werden, entnehmen Sie den Google Maps-Abdeckungsdaten.

Wiedergabe von Wegbeschreibungen

Um eine Wegbeschreibungsanforderung mit der Methode route() an DirectionsService zu stellen, ist die Übergabe einer Callbackmethode erforderlich, die bei Abschluss der Dienstanforderung ausgeführt wird. Von dieser Callbackmethode wird als Antwort ein Code DirectionsResult und ein Code DirectionsStatus zurückgegeben.

Status der Wegbeschreibungsabfrage

Von DirectionsStatus können folgende Werte zurückgegeben werden:

• OK gibt an, dass die Antwort einen gültigen Wert für DirectionsResult enthält.
• NOT_FOUND gibt an, dass mindestens einer der Orte, die in der Anforderung als Ausgangsort, Zielort oder Wegpunkt angegeben wurden, nicht geocodiert werden konnte.
• ZERO_RESULTS gibt an, dass zwischen Start- und Zielort keine Route ermittelt werden konnte.
• MAX_WAYPOINTS_EXCEEDED gibt an, dass in DirectionsRequest zu viele Wegpunkte (DirectionsWaypoint-Felder) angegeben wurden. Angaben zu Wegpunktbeschränkungen finden Sie im nachfolgenden Abschnitt.
• INVALID_REQUEST gibt an, dass die Anforderung (DirectionsRequest) ungültig war. Die häufigste Ursache für diesen Fehlercode ist die fehlende Angabe von Startpunkt oder Zielort in der Anforderung oder Anforderungen für öffentliche Verkehrsmittel, die Wegpunkte enthalten.
• OVER_QUERY_LIMIT gibt an, dass die Webseite innerhalb eines zulässigen Zeitraums zu viele Anforderungen gesendet hat.
• REQUEST_DENIED gibt an, dass die Webseite nicht berechtigt ist, den Directions-Dienst zu nutzen.
• UNKNOWN_ERROR gibt an, dass eine Anforderung aufgrund eines Serverfehlers nicht verarbeitet werden konnte. Möglicherweise ist die Anforderung beim nächsten Versuch erfolgreich.

Stellen Sie sicher, dass durch die Wegbeschreibungsabfrage gültige Ergebnisse zurückgegeben werden, indem Sie diesen Wert überprüfen, bevor Sie das Ergebnis verarbeiten.

DirectionsResult anzeigen

DirectionsResult enthält das Ergebnis der Wegbeschreibungsabfrage; Sie können dieses Ergebnis entweder selbst verarbeiten oder an ein Objekt DirectionsRenderer weitergeben, mit dem die Anzeige des Ergebnisses auf einer Karte automatisch verarbeitet werden kann.

Um DirectionsResult mithilfe eines Objekts DirectionsRenderer anzuzeigen, sind lediglich folgende Schritte erforderlich:

1. Erstellen Sie ein Objekt DirectionsRenderer.
2. Rufen Sie im Renderer setMap() auf, und verknüpfen Sie die Methode mit der übergebenen Karte.
3. Rufen Sie im Renderer setDirections() auf, und übergeben Sie DirectionsResult, wie oben erläutert. Da es sich beim Renderer um ein MVCObject handelt, wird automatisch versucht festzustellen, ob die Renderer-Eigenschaften geändert wurden. Ist dies der Fall, wird die Karte zu aktualisiert, sobald die zugehörigen Wegbeschreibungen geändert wurden.

Im nachfolgenden Beispiel werden Wegbeschreibungen zwischen zwei Standorten an der Route 66 berechnet, wobei Startpunkt und Zielort durch die genannten Werte "start" und "end" in den Auswahllisten definiert sind. Im DirectionsRenderer wird die Anzeige der Polylinie zwischen den angegebenen Standorten sowie die Positionierung von Markern an Startpunkt, Zielort und anderen Wegpunkten, sofern vorhanden, verarbeitet.

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(result);
    }
  });
}

Im HTML-Textkörper:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

Beispiel anzeigen (directions-simple.html)

Im nachfolgenden Beispiel werden Wegbeschreibungen von Haight-Ashbury nach Ocean Beach in San Francisco, CA dargestellt, die verschiedene Verkehrsmittel nutzen:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(response);
    }
  });
}

Im HTML-Textkörper:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

Beispiel anzeigen (directions-travel-modes.html)

Im DirectionsRenderer wird nicht nur die Darstellung der Polylinie und der zugehörigen Marker verarbeitet, es können auch Wegbeschreibungen in Textform als Abfolge von Schritten dargestellt werden. Rufen Sie dazu einfach setPanel() im DirectionsRenderer auf, und übergeben Sie den Bereich <div>, in dem diese Informationen angezeigt werden sollen. Auf diese Weise wird sichergestellt, dass Sie die erforderlichen Informationen zum Urheberrecht sowie eventuell mit dem Ergebnis verbundene Warnungen anzeigen.

Wegbeschreibungen in Textform werden mit der vom Browser bevorzugten Spracheinstellung oder in der Sprache wiedergegeben, die beim Laden von API JavaScript mithilfe des Parameters language definiert wurde. (Weitere Informationen finden Sie unter Lokalisierung.) Im Fall von Wegbeschreibungen für öffentliche Verkehrsmittel wird die Zeit in der Zeitzone der jeweiligen Haltestelle angezeigt.

Das nachfolgende Beispiel ist identisch mit dem obenstehenden Beispiel, enthält jedoch einen Bereich <div>, in dem die Wegbeschreibungen angezeigt werden sollen:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(response);
    }
  });
}

Im HTML-Textkörper:

<div id="map" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>

Beispiel anzeigen (directions-panel.html)

Objekt „DirectionsResult“

Beim Senden von Wegbeschreibungsanforderungen an DirectionsService erhalten Sie eine Antwort in Form eines Statuscodes und ein Ergebnis in Form eines Objekts DirectionsResult. DirectionsResult ist ein Objektliteral mit folgenden Feldern:

• geocoded_waypoints[] enthält ein Array von Objekten DirectionsGeocodedWaypoint, die jeweils Einzelheiten zur Geocodierung von Ausgangsort, Zielort und Wegpunkten enthalten.
• routes[] enthält ein Array von Objekten DirectionsRoute. Mit jeder Route wird ein Weg vom Startpunkt zum Zielort aus DirectionsRequest angegeben. Im Allgemeinen wird nur eine Route für jede Anforderung zurückgegeben, sofern das Feld provideRouteAlternatives der Anforderung nicht auf true gesetzt ist; in diesem Fall können mehrere Routen zurückgegeben werden.

Wegbeschreibung mit geocodierten Wegpunkten

DirectionsGeocodedWaypoint enthält ein Einzelheiten zur Geocodierung von Ausgangsort, Zielort und Wegpunkten.

DirectionsGeocodedWaypoint ist ein Objektliteral mit folgenden Feldern:

• geocoder_status gibt den Statuscode des Vorgangs an. Dieses Feld kann folgende Werte enthalten:
  
  • "OK" gibt an, dass keine Fehler aufgetreten sind. Die Adresse wurde erfolgreich geparst, und es wurde mindestens ein Geocode zurückgegeben.
  • "ZERO_RESULTS" gibt an, dass das Geocoding erfolgreich war, aber keine Ergebnisse zurückgegeben hat. Dies kann eintreten, wenn dem Geocoder eine nicht existierende Adresse (address) übergeben wurde.
• 

  partial_match gibt an, dass der Geocoder kein genaues Ergebnis für die Anforderung zurückgegeben hat, jedoch eine Übereinstimmung mit einem Teil der angeforderten Adresse gefunden hat. Überprüfen Sie ggf. die Anforderung auf Tippfehler und/oder Unvollständigkeit.

  Teilübereinstimmungen treten am häufigsten bei Anschriften auf, die an dem von Ihnen in der Anforderung übergebenen Ort nicht existieren. Teilübereinstimmungen können auch zurückgegeben werden, wenn eine Anforderung mit mehr als einem Standort am selben Ort übereinstimmt. So wird für „21 Henr St, Bristol, UK“ eine Teilübereinstimmung für Henry Street und Henrietta Street zurückgegeben. Enthält eine Anforderung einen Adressbestandteil mit Tippfehlern, schlägt der Geocoder möglicherweise eine andere Adresse vor. Auf diese Weise ausgelöste Vorschläge werden ebenfalls als Teilübereinstimmung gekennzeichnet.

• place_id ist ein eindeutiger Bezeichner eines Ortes, der für andere Google APIs verwendet werden kann. Beispielsweise können Sie die place_id mit der Bibliothek von Google Places API verwenden, um Informationen über ein lokales Unternehmen, wie Telefonnummer, Öffnungszeiten, Bewertungen usw. zu erhalten. Weitere Informationen finden Sie unter Orts-IDs – Übersicht.
• types[] ist ein Array, mit dem der Typ des zurückgegebenen Ergebnisses angegeben wird. Dieses Array enthält einen Satz mit null oder mehreren Tags, die den Typ der im Ergebnis zurückgegebenen Eigenschaft bestimmen. So gibt z. B. die Geocodierung von „Chicago“ des Ergebnis „locality“ zurück, das angibt, dass es sich bei „Chicago“ um eine Stadt handelt, sowie „political“, das „Chicago“ als Verwaltungseinheit identifiziert.

Wegbeschreibungsrouten

Das veraltete Objekt DirectionsTrip wurde in DirectionsRoute umbenannt. Beachten Sie, dass eine Route jetzt die gesamte Reise von Start bis Ende bezeichnet und nicht nur ein Abschnitt einer übergeordneten Route.

DirectionsRoute enthält ein einziges Ergebnis für den angegebenen Ausgangs- und Zielort. Je nachdem, ob Wegpunkte angegeben wurden, kann die Route aus einem oder mehreren Abschnitten (vom Typ DirectionsLeg) bestehen. Darüber hinaus enthält die Route Copyright- und Warnhinweise, die dem Benutzer zusätzlich zu den Routeninformationen angezeigt werden müssen.

DirectionsRoute ist ein Objektliteral mit folgenden Feldern:

• legs[] enthält ein Array von Objekten DirectionsLeg, von denen jedes einzelne Informationen über einen Abschnitt zwischen zwei Orten der Route enthält. Für jeden Wegpunkt oder Zielort wird ein gesonderter Abschnitt angegeben. (Routen ohne Wegpunkte enthalten genau ein Objekt DirectionsLeg.) Jeder Abschnitt besteht aus einer Reihe von Schritten (DirectionStep).
• waypoint_order enthält ein Array, das die Reihenfolge der Wegpunkte in der berechneten Route angibt. Dieses Array kann eine veränderte Reihenfolge enthalten, wenn der Wert optimizeWaypoints: true an DirectionsRequest übergeben wurde.
• overview_path enthält ein Array von Werten LatLng, die für einen angenäherten (geglätteten) Pfad der resultierenden Wegbeschreibungen stehen.
• overview_polyline enthält ein einzelnes Objekt points, das eine codierte Polyliniendarstellung der Route umfasst. Die Polylinie ist der annähernde (geglättete) Pfad der ermittelten Wegbeschreibung.
• bounds enthält einen Wert LatLngBounds, der die Grenzbereiche der Polylinie entlang dieser Route angibt.
• copyrights enthält die für diese Route anzuzeigenden Copyright-Hinweise.
• warnings[] enthält ein Array mit Warnungen, die für diese Wegbeschreibung angezeigt werden müssen. Wenn Sie das bereitgestellte Objekt DirectionsRenderer nicht verwenden, müssen Sie diese Warnungen selbst bearbeiten und anzeigen.
• fare enthält den Gesamtbetrag (d. h. die Kosten für die Fahrkarte) auf dieser Strecke. Diese Eigenschaft wird nur bei Anforderungen für öffentliche Verkehrsmittel und Routen zurückgegeben, auf denen Tarifinformationen für sämtliche Abschnitte verfügbar sind. Folgende Informationen werden ausgegeben:
  • currency: Der Währungscode nach ISO 4217 gibt die Währung des Betrags an.
  • value: Der Gesamtbetrag in der oben angegebenen Währung.

Wegbeschreibungsabschnitte

Das veraltete Objekt DirectionsRoute wurde in DirectionsLeg umbenannt.

Mit einem Objekt DirectionsLeg wird ein einzelner Abschnitt der Route zwischen Ausgangs- und Zielort angegeben. Routen, die keine Wegpunkte enthalten, bestehen aus einem einzigen „Abschnitt“, Routen mit einem oder mehreren Wegpunkten aus mehreren Abschnitten.

DirectionsLeg ist ein Objektliteral mit folgenden Feldern:

• steps[] enthält ein Array von Objekten DirectionsStep mit Informationen zu jedem einzelnen Schritt im Abschnitt einer Reise.

• distance gibt die Entfernung, die auf einem bestimmten Abschnitt zurückgelegt wird, als Objekt Distance in folgender Form an:

  • Mit value wird die Entfernung in Metern angegeben.
  • text enthält eine Zeichenfolge, mit der die Entfernung standardmäßig in der Einheit des Ausgangsorts angegeben wird. (So wird bei Ausgangsorten in den USA die Entfernung stets in Meilen angegeben.) Sie können dieses Einheitensystem übersteuern, indem Sie in der Originalabfrage ein Einheitensystem (UnitSystem) explizit festlegen. Beachten Sie, dass der Wert im Feld distance.value unabhängig vom verwendeten Einheitensystem stets in Metern ausgedrückt wird.

  Diese Felder sind möglicherweise nicht definiert, wenn die Entfernung nicht bekannt ist.

• duration gibt die Gesamtdauer des Abschnitts als Objekt Duration in folgender Form an:

  • value gibt die Dauer in Sekunden an.
  • text enthält eine lesbare Angabe der Dauer.

  Diese Felder sind möglicherweise nicht definiert, wenn die Dauer nicht bekannt ist.

• duration_in_traffic gibt die Gesamtdauer dieses Abschnitts unter Berücksichtigung der aktuellen Verkehrsbedingungen an. duration_in_traffic wird nur dann zurückgegeben, wenn alle folgenden Bedingungen erfüllt sind:

  • Die Anforderung enthält eine gültige Google Maps APIs Premium Plan-Client-ID.
  • Die Anforderung enthält keine Wegpunkte mit Aufenthalt. Das heißt, sie enthält keine Wegpunkte, für die stopover den Wert true hat.
  • Die Anforderung bezieht sich auf eine Wegbeschreibung für Kraftfahrzeuge – mode ist auf driving festgelegt.
  • In der Anforderung ist departureTime als Teil des Felds drivingOptions enthalten.
  • Für die angeforderte Route sind Informationen über die Verkehrsbedingungen verfügbar.

  duration_in_traffic enthält die folgenden Felder:

  • value gibt die Dauer in Sekunden an.
  • text enthält eine menschenlesbare Darstellung der Dauer.
• arrival_time enthält die geschätzte Ankunftszeit für diesen Abschnitt. Diese Eigenschaft wird nur bei Anforderungen für öffentliche Verkehrsmittel zurückgegeben. Das Ergebnis wird als Objekt Time mit drei Eigenschaften zurückgegeben:
  • value: die Zeit definiert als JavaScript-Objekt Date.
  • text die Zeit definiert als Zeichenfolge. Die Zeit wird in der Zeitzone des Zielorts angegeben.
  • time_zone enthält die Zeitzone dieses Halts. Der Wert ist der Name der Zeitzone gemäß Definition der IANA-Zeitzonen-Datenbank, bspw. „America/New_York“.
• departure_time enthält die geschätzte Abfahrtzeit für diesen Abschnitt und wird als Objekt Time angegeben. departure_time wird nur bei Anforderungen für öffentliche Verkehrsmittel zurückgegeben.
• start_location enthält die Koordinaten (LatLng) des Ausgangsorts dieses Abschnitts. Da der Directions-Webdienst für die Berechnung von Wegbeschreibungen die dem Ausgangs- und Zielort nächstgelegene Reiseoption (normalerweise eine Straße) verwendet, kann sich start_location vom angegebenen Ausgangsort dieses Abschnitts unterscheiden, wenn sich bspw. keine Straße in dessen Nähe befindet.
• end_location enthält die Koordinaten (LatLng) des Zielortes dieses Abschnitts. Da DirectionsService für die Berechnung von Wegbeschreibungen die dem Ausgangs- und Zielort nächstgelegene Reiseoption (normalerweise eine Straße) verwendet, kann sich end_location vom angegebenen Zielort dieses Abschnitts unterscheiden, wenn sich bspw. keine Straße in dessen Nähe befindet.
• start_address enthält die lesbare Adresse (normalerweise die genaue Anschrift) des Startpunktes dieses Abschnitts.
• end_address enthält die lesbare Adresse (normalerweise die genaue Anschrift) des Endpunktes dieses Abschnitts.

Schritte in Wegbeschreibungen

Ein Schritt (DirectionsStep) ist die kleinste Einheit der Route und beschreibt eine einzelne, bestimmte Anweisung für die Reise. Beispiel: „An der W. 4th St. links abbiegen“ Außer der Anweisung enthält der Schritt auch Informationen zu Entfernung und Dauer dieses Schritts in Bezug auf den nächsten. Beispielsweise kann der Schritt „Fahren Sie auf die I-80 West“ die Entfernung „37 Meilen“ und die Dauer „40 Minuten“ enthalten und somit darauf hinweisen, dass der nächste Schritt 37 Meilen bzw. 40 Minuten von diesem entfernt ist.

Wird mit dem Directions-Dienst nach Wegbeschreibungen für öffentliche Verkehrsmittel gesucht, dann enthält das Array „Steps“ zusätzliche Spezielle Angaben für öffentliche Verkehrsmittel in Form eines Objekts transit. Umfasst die Wegbeschreibung verschiedene Transportmittel, so werden die detaillierten Beschreibungen für Fußgänger oder Kraftfahrzeuge in einem Array steps[] angegeben. Ein Schritt in der Wegbeschreibung für Fußgänger enthält bspw. Beschreibungen vom Ausgangs- zum Zielort: „Gehen Sie zur Innes Ave & Fitch St.“ Für diese Route enthält dieser Schritt detaillierte Wegbeschreibungen im Array steps[], wie z. B.: „Gehen Sie in Richtung Nordwesten“, „Biegen Sie links auf Arelious Walker ab“ und „Biegen Sie links auf Innes Ave ab“.

DirectionsStep ist ein Objektliteral mit folgenden Feldern:

• instructions enthält Anweisungen für diesen Schritt in Form einer Zeichenfolge.
• distance enthält die bei diesem Schritt zurückgelegte Entfernung als Objekt Distance. (Weitere Informationen zu diesem Feld finden Sie oben im Abschnitt DirectionsLeg.) Dieses Feld ist möglicherweise nicht definiert, wenn die Entfernung nicht bekannt ist.
• duration enthält die Zeit, die normalerweise für diesen Schritt benötigt wird, als Objekt Duration. (Weitere Informationen zu diesem Feld finden Sie oben im Abschnitt DirectionsLeg.) Dieses Feld ist möglicherweise nicht definiert, wenn die Dauer nicht bekannt ist.
• start_location enthält die geocodierten Koordinaten (LatLng) des Ausgangspunkts dieses Schritts.
• end_location enthält die Koordinaten (LatLng) des Endpunktes dieses Abschnitts.
• polyline enthält ein einzelnes Objekt points, das eine codierte Polyliniendarstellung des Schritts umfasst. Die Polylinie ist der annähernde (geglättete) Pfad des Schritts.
• steps[], ein Objektliteral DirectionsStep, enthält detaillierte Angaben für Fußgänger oder Kraftfahrzeuge in Wegbeschreibungen für öffentliche Verkehrsmittel. Teilschritte sind nur für öffentliche Verkehrsmittel verfügbar.
• travel_mode enthält das in diesem Schritt verwendete Verkehrsmittel (TravelMode). Wegbeschreibungen für öffentliche Verkehrsmittel können zu Fuß und mit öffentlichen Verkehrsmitteln zurückgelegte Strecken kombinieren.
• path enthält ein Array von LatLngs, mit denen der Verlauf dieses Schritts beschrieben wird.
• transit enthält spezielle Angaben zu öffentlichen Verkehrsmitteln, z. B. Abfahrt- und Ankunftszeiten sowie den Namen der Transportlinie.

Spezielle Informationen zu öffentlichen Verkehrsmitteln.

Wegbeschreibungen für öffentliche Verkehrsmittel geben zusätzliche Informationen zurück, die für andere Transportmittel nicht relevant sind. Diese zusätzlichen Eigenschaften werden durch das Objekt TransitDetails dargestellt, das als Eigenschaft von DirectionsStep zurückgegeben wird. Über das Objekt TransitDetails haben Sie Zugriff auf zusätzliche Informationen zu Haltestelle (TransitStop), Linie (TransitLine), Beförderungsunternehmen (TransitAgency) und Art des Fahrzeugs (VehicleType), wie oben beschrieben.

Informationen zu öffentlichen Verkehrsmitteln

Das Objekt TransitDetails umfasst die folgenden Eigenschaften:

• arrival_stop enthält ein Objekt TransitStop, mit dem die Ankunftsstation/Haltestelle mit folgenden Eigenschaften angegeben wird:
  • name: der Name der Haltestelle, z. B. „Union Square“.
  • location: der Standort der Haltestelle, angegeben als Wert LatLng.
• departure_stop enthält ein Objekt TransitStop, mit dem die Abfahrtsstation/Haltestelle angegeben wird.
• arrival_time enthält die Ankunftszeit, die als Objekt Time mit drei Eigenschaften zurückgegeben wird:
  • value: die Zeit definiert als JavaScript-Objekt Date.
  • text die Zeit definiert als Zeichenfolge. Die Zeit wird in der Zeitzone des Zielorts angegeben.
  • time_zone enthält die Zeitzone dieses Halts. Der Wert ist der Name der Zeitzone gemäß Definition der IANA-Zeitzonen-Datenbank, bspw. „America/New_York“.
• departure_time enthält die Abfahrtzeit, die als Objekt Time zurückgegeben wird.
• headsign: die Fahrtrichtung der jeweiligen Linie, wie sie auf dem Fahrzeug oder an der Haltestelle angegeben ist. Oft ist dies der Name der Endhaltestelle.
• headway (sofern verfügbar): die erwartete Anzahl Sekunden zwischen Abfahrten von dieser Haltestelle zu dieser Zeit. Beträgt der Wert von headway bspw. 600, so sollte der nächste Bus in 10 Minuten abfahren.
• line enthält Informationen zum Objektliteral TransitLine, das Daten zur jeweiligen im Schritt verwendeten Linie enthält: TransitLine enthält den Namen und Betreiber der Linie sowie weitere Eigenschaften, die in der Referenzdokumentation TransitLine genauer erläutert sind.
• num_stops enthält die Anzahl der Haltestellen in diesem Schritt. Hierbei wird die Ankunftshaltestelle mitgezählt, die Abfahrtshaltestelle jedoch nicht. Beginnt die Fahrt bspw. bei Abfahrtshaltestelle A, passiert dann die Haltestellen B und C und endet an Haltestelle D, so gibt num_stops den Wert 3 zurück.

Verkehrslinie

Das Objekt TransitLine umfasst die folgenden Eigenschaften:

• name enthält den vollen Namen der Linie, bspw. „7 Avenue Express“ oder „14th St Crosstown“.
• short_name enthält den Kurznamen der Linie. Dabei handelt es sich normalerweise um die Nummer der Linie, bspw. „2“ oder „M14“.
• agencies enthält ein Array vom Typ TransitAgency. Jedes Objekt TransitAgency enthält Informationen zum Beförderungsunternehmen der Linie einschließlich der folgenden Eigenschaften:
  • name: der Name des Beförderungsunternehmens.
  • url: die URL des Beförderungsunternehmens.
  • phone: die Telefonnummer des Beförderungsunternehmens.

  Wenn Sie Wegbeschreibungen mit öffentlichen Verkehrsmitteln manuell wiedergeben, statt das Objekt DirectionsRenderer zu verwenden, müssen Sie die Namen und URLs der Beförderungsunternehmen in den Routenergebnissen angeben.

• url enthält eine URL für die Linie, wie vom Beförderungsunternehmen angegeben.
• icon enthält eine URL für das mit dieser Linie verbundene Symbol. Die meisten Orte verwenden allgemeine Symbole, die nach Art des Verkehrsmittels variieren können. Einige Verkehrslinien, z. B. das U-Bahnsystem in New York, verwenden spezielle Symbole für diese Linie.
• color enthält die Farbe, die im Liniennetz als Kennfarbe für diese Linie verwendet wird. Die Farbe wird als Hexadezimalwert wie z. B. #FF0033 angegeben.
• text_color enthält die Textfarbe, die für die Kennzeichnung dieser Linie verwendet wird. Die Farbe wird als Hexadezimalwert angegeben.
• vehicle enthält ein Objekt Vehicle, das folgende Eigenschaften umfasst:
  • name enthält die Bezeichnung des Fahrzeugs auf dieser Linie, bspw. „U-Bahn“.
  • type enthält den auf dieser Linie eingesetzten Fahrzeugtyp. In der Dokumentation zu den Fahrzeugtypen finden Sie eine vollständige Liste der unterstützten Werte.
  • icon enthält eine URL für das im Allgemeinen mit diesem Fahrzeugtyp verbundene Symbol.
  • local_icon enthält die URL für das mit diesem Fahrzeugtyp verbundene Symbol, basierend auf der Kennzeichnung für Nahverkehr.

Fahrzeugtyp

Das Objekt VehicleType umfasst die folgenden Eigenschaften:

DirectionsResults überprüfen

Die Komponenten DirectionsResults – DirectionsRoute, DirectionsLeg, DirectionsStep und TransitDetails – können bei der Analyse jeglicher Wegbeschreibungsantworten überprüft werden.

Wichtig: Wenn Sie Wegbeschreibungen mit öffentlichen Verkehrsmitteln manuell wiedergeben, statt das Objekt DirectionsRenderer zu verwenden, müssen Sie die Namen und URLs der Beförderungsunternehmen in den Routenergebnissen angeben.

Im folgenden Beispiel werden Wegbeschreibungen für Fußgänger zu bestimmten Touristenattraktionen in New York City aufgezeichnet. Wir überprüfen die Routenkomponente DirectionsStep, um Marker zu den einzelnen Schritten hinzuzufügen und Informationen in einem Info-Fenster InfoWindow mit Anweisungen zu diesem Schritt zu ergänzen.

Da wir Wegbeschreibungen für Fußgänger berechnen, zeigen wir dem Benutzer außerdem eventuelle Warnungen in einem Bereich <div> an.

var map;
var directionsDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];

function initialize() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsDisplay.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

Im HTML-Textkörper:

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

Beispiel anzeigen (directions-complex.html)

Verwendung von Wegpunkten in Routen

Wie zu DirectionsRequest bereits angemerkt, können Sie Wegpunkte (waypoints, vom Typ DirectionsWaypoint) auch angeben, wenn Sie Routen mithilfe des Directions-Dienstes für Fußgänger, Fahrradfahrer oder Kraftfahrzeuge berechnen. Wegpunkte werden für Wegbeschreibungen für öffentliche Verkehrsmittel nicht unterstützt. Wegpunkte ermöglichen es, zusätzliche Orte in die Berechnung von Routen aufzunehmen. Die zurückgegebene Route verläuft in diesem Fall entlang den angegebenen Wegpunkten.

Ein Wegpunkt (waypoint) besteht aus folgenden Feldern:

• location (erforderlich): gibt die Adresse des Wegpunktes an.
• stopover (optional): gibt an, ob der Wegpunkt ein tatsächlicher Halt auf der Route ist (true) oder ob die Route über den angegebenen Ort lediglich empfohlen wird (false). Der Standardwert für Aufenthalt ist true.

Standardmäßig berechnet der Directions-Dienst die Strecke über die Wegpunkte in der angegebenen Reihenfolge. Um die Wegpunkte mithilfe des Directions-Dienstes effizienter anzuordnen und die ausgegebene Route zu optimieren, können Sie optimizeWaypoints: true in DirectionsRequest übergeben. (Diese Optimierung ist eine Anwendung des Problems des Handlungsreisenden.) Der optimierte primäre Faktor ist die Reisezeit, wobei aber bei der Entscheidung, welche Route die effizienteste ist, weitere Faktoren wie Entfernung, Anzahl der Abbiegevorgänge und vieles mehr berücksichtigt werden können. Um ihre Route zu optimieren, müssen alle Wegpunkte für den Directions-Dienst als Aufenthalte definiert sein.

Wenn Sie eine Optimierung der Reihenfolge der Wegpunkte im Directions-Dienst vorgeben, wird diese Reihenfolge im Feld waypoint_order im Objekt DirectionsResult zurückgegeben.

Im nachfolgenden Beispiel werden Langlaufloipen quer durch die USA mithilfe einer Vielzahl an Startpunkten, Endpunkten und Wegpunkten berechnet. (Um mehrere Wegpunkte auszuwählen, drücken Sie Strg-Klick bei der Auswahl der Elemente in der Liste.) Beachten Sie, dass wir routes.start_address und routes.end_address überprüfen, um den Text für die einzelnen Start- und Endpunkt aller Routen zu erhalten.

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 41.85, lng: -87.65}
  });
  directionsDisplay.setMap(map);

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true
      });
    }
  }

  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<select id="start">
  <option value="Halifax, NS">Halifax, NS</option>
  <option value="Boston, MA">Boston, MA</option>
  <option value="New York, NY">New York, NY</option>
  <option value="Miami, FL">Miami, FL</option>
</select>
<br>
<b>Waypoints:</b> <br>
<i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>
<select multiple id="waypoints">
  <option value="montreal, quebec">Montreal, QBC</option>
  <option value="toronto, ont">Toronto, ONT</option>
  <option value="chicago, il">Chicago</option>
  <option value="winnipeg, mb">Winnipeg</option>
  <option value="fargo, nd">Fargo</option>
  <option value="calgary, ab">Calgary</option>
  <option value="spokane, wa">Spokane</option>
</select>
<br>
<b>End:</b>
<select id="end">
  <option value="Vancouver, BC">Vancouver, BC</option>
  <option value="Seattle, WA">Seattle, WA</option>
  <option value="San Francisco, CA">San Francisco, CA</option>
  <option value="Los Angeles, CA">Los Angeles, CA</option>
</select>
<br>
  <input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>

#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
}
#right-panel {
  margin: 20px;
  border-width: 2px;
  width: 20%;
  height: 400px;
  float: left;
  text-align: left;
  padding-top: 0;
}
#directions-panel {
  margin-top: 10px;
  background-color: #FFEE77;
  padding: 10px;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 41.85, lng: -87.65}
  });
  directionsDisplay.setMap(map);

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true
      });
    }
  }

  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

Beispiel anzeigen (directions-waypoints.html).

Einschränkungen für Wegpunkte

Es gelten die folgenden Nutzungsbeschränkungen und Einschränkungen:

• Die maximal nutzbare Anzahl von Wegpunkten bei Verwendung des Directions-Diensts in der Google Maps JavaScript API beträgt 23, plus Startort und Zielort. Die gleichen Grenzwerte gelten für den Google Maps Directions API-Webdienst.
• Für den Google Maps Directions API-Webdienst stehen den Kunden 23 Wegpunkte zuzüglich Startort und Zielort zur Verfügung.
• Google Maps APIs Premium Plan-Kunden stehen 23 Wegpunkte zur Verfügung, plus Startort und Zielort.
• Wegpunkte werden für Wegbeschreibungen für öffentliche Verkehrsmittel nicht unterstützt.

Ziehbare Wegbeschreibungen

Benutzer können Wegbeschreibungen für Fahrradfahrer, Fußgänger und Kraftfahrtzeuge, die mit DirectionsRenderer angezeigt werden, dynamisch verändern, wenn diese ziehbar sind. Dies ermöglicht es dem Benutzer, Routen auszuwählen und zu verändern, indem sie die daraus resultierenden Pfade auf der Karte anklicken und ziehen. Um festzulegen, dass die Anzeige eines Renderers ziehbare Wegbeschreibungen zulassen soll, setzen Sie die entsprechende Eigenschaft draggable auf true. Es ist nicht möglich, Wegbeschreibungen für öffentliche Verkehrsmittel als ziehbar zu definieren.

Wenn Wegbeschreibungen ziehbar sind, kann der Benutzer einen beliebigen Punkt (oder Wegpunkt) des dargestellten Ergebnisses auswählen, und das angezeigte Element an eine neue Position ziehen. DirectionsRenderer aktualisiert die Ansicht dynamisch und gibt den veränderten Pfad wieder. Bei Freigabe wird ein Übergangswegpunkt zur Karte hinzugefügt (dargestellt als kleiner weißer Marker). Durch Auswählen und Verschieben eines Pfadsegments wird der Abschnitt der Route verändert, während das Auswählen und Verschieben eines Wegpunktmarkers (einschließlich Start- und Endpunkte) die Abschnitte der Route verändert, die durch diesen Wegpunkt verlaufen.

Da ziehbare Wegbeschreibungen clientseitig verändert und wiedergegeben werden, sollten Sie ggf. das Ereignis directions_changed in DirectionsRenderer überwachen, um über eventuelle Änderungen der angezeigten Wegbeschreibungen durch den Benutzer benachrichtigt zu werden.

Der folgende Code zeigt eine Fahrt von Perth an der australischen Westküste nach Sydney an der Ostküste. Das Ereignis directions_changed wird mit dem Code überwacht, um die Gesamtlänge aller Abschnitte der Reise zu aktualisieren.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -24.345, lng: 134.46}  // Australia.
  });

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
      directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000;
  document.getElementById('total').innerHTML = total + ' km';
}

<div id="map"></div>
<div id="right-panel">
  <p>Total Distance: <span id="total"></span></p>
</div>

#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 63%;
  height: 100%;
}
#right-panel {
  float: right;
  width: 34%;
  height: 100%;
}
.panel {
  height: 100%;
  overflow: auto;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -24.345, lng: 134.46}  // Australia.
  });

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
      directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000;
  document.getElementById('total').innerHTML = total + ' km';
}

Beispiel anzeigen (directions-draggable.html).