Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Route abrufen

Entwickler im Europäischen Wirtschaftsraum (EWR)

Eine Route ist ein navigierbarer Weg zwischen einem Startort (Ausgangspunkt) und einem Ziel ort. Sie können eine Route für verschiedene Verkehrsmittel abrufen, z. B. für Fußgänger, Radfahrer oder verschiedene Fahrzeugtypen. Außerdem können Sie Routendetails wie Entfernung, geschätzte Zeit für die Navigation voraussichtliche Mautgebühren und eine Schritt-für-Schritt-Anleitung für die Navigation anfordern.

Vollständigen Quellcode des Beispiels ansehen

Das folgende Codebeispiel zeigt, wie Sie eine Route für die Wegbeschreibung zwischen zwei Orten abrufen.

TypeScript

// Initialize and add the map.
let map: google.maps.Map;
let mapPolylines: google.maps.Polyline[] = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function init(): Promise<void> {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('routes'),
    ]);

    map = new Map(document.getElementById('map')!, {
        zoom: 12,
        center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };
    console.log({ requestWithAddressStrings });

    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });

    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });

    const requestWithPlaceIds: google.maps.routes.ComputeRoutesRequest = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    console.log({ requestWithPlaceIds });

    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

    // Define a computeRoutes request.
    const requestWithLatLngs: google.maps.routes.ComputeRoutesRequest = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    console.log({ requestWithLatLngs });

    // Use Plus Codes in a directions request.
    const requestWithPlusCodes: google.maps.routes.ComputeRoutesRequest = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };
    console.log({ requestWithPlusCodes });

    // Define a routes request.
    const request: google.maps.routes.ComputeRoutesRequest = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Call computeRoutes to get the directions.
    const { routes } = await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    if (!routes) {
        console.warn('No routes found.');
        return;
    }
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => {
        polyline.setMap(map);
    });

    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => {
        marker.map = map;
    });

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);

    // Fit the map to the path.
    void fitMapToPath(routes[0].path!);
}

// Helper function to fit the map to the path.
async function fitMapToPath(path: google.maps.LatLngLiteral[]) {
    const { LatLngBounds } = await google.maps.importLibrary('core');
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}

void init();index.ts

JavaScript

// Initialize and add the map.
let map;
let mapPolylines = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('routes'),
    ]);

    map = new Map(document.getElementById('map'), {
        zoom: 12,
        center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };
    console.log({ requestWithAddressStrings });

    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });

    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });

    const requestWithPlaceIds = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    console.log({ requestWithPlaceIds });

    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

    // Define a computeRoutes request.
    const requestWithLatLngs = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    console.log({ requestWithLatLngs });

    // Use Plus Codes in a directions request.
    const requestWithPlusCodes = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };
    console.log({ requestWithPlusCodes });

    // Define a routes request.
    const request = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Call computeRoutes to get the directions.
    const { routes } = await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    if (!routes) {
        console.warn('No routes found.');
        return;
    }
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => {
        polyline.setMap(map);
    });

    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => {
        marker.map = map;
    });

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);

    // Fit the map to the path.
    void fitMapToPath(routes[0].path);
}

// Helper function to fit the map to the path.
async function fitMapToPath(path) {
    const { LatLngBounds } = await google.maps.importLibrary('core');
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}

void init();index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    height: 100%;
}

/*
   * Optional: Makes the sample page fill the window.
   */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}style.css

HTML

<html>
    <head>
        <title>Get directions</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>index.html

Rufen Sie die computeRoutes() Methode auf, um eine Route zwischen zwei Orten anzufordern. Im folgenden Beispiel wird gezeigt, wie Sie eine Anfrage definieren und dann computeRoutes() aufrufen, um eine Route abzurufen.

  // Import the Routes library.
  const { Route } = await google.maps.importLibrary('routes');

  // Define a computeRoutes request.
  const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
  };

  // Call the computeRoutes() method to get routes.
  const {routes} = await Route.computeRoutes(request);

Zurückzugebende Felder auswählen

Wenn Sie eine Route anfordern, müssen Sie mit einer Feldmaske angeben, welche Informationen in der Antwort zurückgegeben werden sollen. Sie können die Namen der Eigenschaften der Klasse Route in der Feldmaske angeben.

Mit einer Feldmaske lässt sich auch verhindern, dass unnötige Daten angefordert werden. Das wiederum hilft die Antwortlatenz zu verringern und zu vermeiden, dass Informationen zurückgegeben werden, die Ihr System nicht benötigt.

Geben Sie die Liste der benötigten Felder an, indem Sie die ComputeRoutesRequest.fields Eigenschaft festlegen, wie im folgenden Snippet gezeigt:

TypeScript

// Define a routes request.
const request: google.maps.routes.ComputeRoutesRequest = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};index.ts

JavaScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};index.js

Orte für eine Route angeben

Um eine Route zu berechnen, müssen Sie mindestens die Orte des Routenursprungs und des Routenziels sowie eine Feldmaske angeben. Sie können auch Zwischenwegpunkte entlang einer Route angeben und Wegpunkte für andere Zwecke verwenden, z. B. um Haltestellen oder Durchgangspunkte entlang einer Route hinzuzufügen.

In der ComputeRoutesRequest können Sie einen Ort auf eine der folgenden Arten angeben:

Place (bevorzugt)
Breiten- und Längengrad
Adressstring ("Berlin" oder "Hamburg")
Plus Code

Sie können Orte für alle Wegpunkte in einer Anfrage auf dieselbe Weise angeben oder sie mischen. Sie können beispielsweise Breiten- und Längengrad für den Ausgangspunkt und ein Place-Objekt für den Zielwegpunkt verwenden.

Verwenden Sie aus Effizienz- und Genauigkeitsgründen Place-Objekte anstelle von Breiten- und Längengrad oder Adresstrings. Orts-IDs sind eindeutig und bieten Vorteile beim Geocoding für die Routenplanung z. B. Zugangspunkte und Verkehrsvariablen. Sie helfen, die folgenden Situationen zu vermeiden, die bei anderen Methoden zur Angabe eines Ortes auftreten können:

Wenn Sie Breiten- und Längengrad verwenden, kann es passieren, dass der Ort an die Straße angehängt wird, die diesen Koordinaten am nächsten liegt. Das ist möglicherweise kein Zugangspunkt zum Grundstück oder nicht einmal eine Straße, die schnell oder sicher zum Ziel führt.
Adressstrings müssen zuerst von der Routes API geocodiert werden, um sie in Breiten- und Längengrad umzuwandeln, bevor eine Route berechnet werden kann. Diese Umwandlung kann sich auf die Leistung auswirken.

Ort als Place-Objekt angeben (bevorzugt)

Wenn Sie einen Ort mit einem Place-Objekt angeben möchten, erstellen Sie eine neue Place-Instanz. Das folgende Snippet zeigt, wie Sie neue Place Instanzen für origin und destination erstellen und sie dann in einer ComputeRoutesRequest verwenden:

TypeScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});

const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});

const requestWithPlaceIds: google.maps.routes.ComputeRoutesRequest = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};index.ts

JavaScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});

const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});

const requestWithPlaceIds = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};index.js

Breiten- und Längengrad

Wenn Sie einen Ort als Breiten- und Längengrad angeben möchten, erstellen Sie entweder eine neue google.maps.LatLngLiteral, google.maps.LatLngAltitude, oder google.maps.LatLngAltitudeLiteral-Instanz. Das folgende Snippet zeigt, wie Sie neue google.maps.LatLngLiteral Instanzen für origin und destination erstellen und sie dann in einer computeRoutesRequest verwenden:

TypeScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

// Define a computeRoutes request.
const requestWithLatLngs: google.maps.routes.ComputeRoutesRequest = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};index.ts

JavaScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

// Define a computeRoutes request.
const requestWithLatLngs = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};index.js

Adressstring

Adressstrings sind Adressen, die als String dargestellt werden (z. B. „Unter den Linden 14, 10117 Berlin“). Beim Geocoding wird ein Adressstring in Breiten- und Längengrad umgewandelt (z. B. Breitengrad 37.423021 und Längengrad -122.083739).

Wenn Sie einen Adressstring als Ort eines Wegpunkts übergeben, geocodiert die Routes Library den String intern, um ihn in Breiten- und Längengrad umzuwandeln.

Das folgende Snippet zeigt, wie Sie eine ComputeRoutesRequest mit einem Adress string für origin und destination erstellen:

TypeScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};index.ts

JavaScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};index.js

Region für die Adresse festlegen

Wenn Sie einen unvollständigen Adressstring als Ort eines Wegpunkts übergeben, verwendet die API möglicherweise die falschen geocodierten Breiten- und Längengrad. Beispiel: Sie stellen eine Anfrage, in der Sie „Berlin“ als Ausgangspunkt und „Hamburg“ als Ziel für eine Route mit dem Auto angeben:

// Define a request with an incomplete address string.
const request = {
  origin: 'Toledo',
  destination: 'Madrid',
};

In diesem Beispiel wird „Berlin“ als Stadt im Bundesstaat Illinois in den USA interpretiert, nicht in Deutschland. Daher gibt die Anfrage ein leeres Array zurück, was bedeutet, dass keine Routen vorhanden sind.

Sie können die API so konfigurieren, dass Ergebnisse zurückgegeben werden, die nach einer bestimmten Region gewichtet sind. Dazu müssen Sie den Parameter regionCode einfügen. Dieser Parameter gibt den Regionscode als Ländercode der Top-Level-Domain (ccTLD) an. Die meisten ccTLD-Codes sind mit den ISO 3166-1-Codes identisch. Es gibt jedoch einige Ausnahmen. So lautet beispielsweise die ccTLD des Vereinigten Königreichs „uk“ (.co.uk) und der entsprechende ISO 3166-1-Code „gb“ (technisch für die Einheit „Vereinigtes Königreich Großbritannien und Nordirland“).

Eine Routenanfrage für „Toledo“ nach „Madrid“, die den Parameter regionCode enthält, gibt die entsprechenden Ergebnisse zurück, da „Toledo“ als Stadt in Spanien interpretiert wird:

const request = {
  origin: 'Toledo',
  destination: 'Madrid',
  region: 'es', // Specify the region code for Spain.
};

Plus Code

Viele Menschen haben keine genaue Adresse, was es ihnen erschweren kann, Lieferungen zu erhalten. Oder Personen mit einer Adresse möchten Lieferungen möglicherweise an bestimmten Orten annehmen, z. B. an einem Hintereingang oder einer Laderampe.

Plus Codes sind wie Adressen für Personen oder Orte, die keine tatsächliche Adresse haben. Anstelle von Adressen mit Straßennamen und Hausnummern basieren Plus Codes auf Breiten- und Längengrad und werden als Zahlen und Buchstaben angezeigt.

Google hat Plus Codes entwickelt, um allen und allem die Vorteile von Adressen zu bieten. Ein Plus Code ist ein codierter Verweis auf den Standort, der sich aus den Koordinaten (Breiten- und Längengrad) ableiten lässt und einen Bereich definiert: 1/8.000stel eines Grades mal 1/8.000stel eines Grades (ca. 14 m × 14 m am Äquator) oder kleiner. Plus Codes können als Ersatz für Adressen verwendet werden, wenn keine Adressen vorhanden sind, z. B. wenn Gebäude keine Hausnummern oder Straßen keine Namen haben.

Plus Codes müssen als globaler oder als zusammengesetzter Code formatiert werden:

Der Global Code besteht aus einem vierstelligen Code für das Gebiet und einem mindestens sechsstelligen lokalen Code. Für die Adresse „Unter den Linden 14, 10117 Berlin“ lautet der Global Code beispielsweise „849V“ und der lokale Code „CWC8+R9“. Verwenden Sie dann den gesamten zehnstelligen Plus Code, um den Wert für den Ort als „849VCWC8+R9“ anzugeben.
Der Compound Code besteht aus einem mindestens sechsstelligen lokalen Code in Kombination mit einem expliziten Ort. Die Adresse „450 Serra Mall, Stanford, CA 94305, USA“ hat beispielsweise den lokalen Code „CRHJ+C3“. Für eine zusammengesetzte Adresse kombinieren Sie den lokalen Code mit der Stadt, Bundesstaat, Postleitzahl und Land in der Adresse im Format "CRHJ+C3 Stanford, CA 94305, USA".

Das folgende Snippet zeigt, wie Sie eine Route berechnen, indem Sie einen Wegpunkt für den Routenursprung und das Routenziel mit Plus Codes angeben:

TypeScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes: google.maps.routes.ComputeRoutesRequest = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};index.ts

JavaScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};index.js

Route abrufen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Vollständigen Quellcode des Beispiels ansehen

TypeScript

JavaScript

CSS

HTML

Zurückzugebende Felder auswählen

TypeScript

JavaScript

Orte für eine Route angeben

Ort als Place-Objekt angeben (bevorzugt)

TypeScript

JavaScript

Breiten- und Längengrad

TypeScript

JavaScript

Adressstring

TypeScript

JavaScript

Region für die Adresse festlegen

Plus Code

TypeScript

JavaScript

Route abrufen