Obtenir un itinéraire

Développeurs de l'Espace économique européen (EEE)

Un itinéraire est un chemin navigable entre un point de départ (ou origine) et un point d'arrivée (ou destination). Vous pouvez choisir d'obtenir un itinéraire pour différents modes de transport, comme la marche, le vélo ou différents types de véhicules. Vous pouvez également demander des détails sur l'itinéraire, tels que la distance, la durée estimée du trajet, les péages prévus et les instructions détaillées pour suivre l'itinéraire.

Afficher l'exemple de code source complet

L'exemple de code suivant montre comment obtenir un itinéraire en voiture entre deux lieux.

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();

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();

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;
}

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>

Appelez la méthode computeRoutes() pour demander un itinéraire entre deux lieux. L'exemple suivant montre comment définir une requête, puis appeler computeRoutes() pour obtenir un itinéraire. computeRoutes() est une méthode statique de la classe Route. Appelez donc directement Route.computeRoutes(request). La requête doit également définir la propriété fields sur un masque de champ de réponse.

  // 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',
    fields: ['path'], // Required: response field mask.
  };

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

Pour tracer l'itinéraire sur une carte, appelez createPolylines() sur un itinéraire que vous avez demandé avec le champ path. Consultez Afficher des polylignes sur une carte.

Sélectionner les champs à renvoyer

Lorsque vous demandez un itinéraire, vous devez utiliser un masque de champ pour spécifier les informations que la réponse doit renvoyer. Vous pouvez spécifier les noms des propriétés de la classe Route dans le masque de champ.

Le masquage de champ vous permet également de ne pas demander de données inutiles, ce qui contribue à réduire la latence des réponses et évite de renvoyer des informations dont votre système n'a pas besoin.

Spécifiez la liste des champs dont vous avez besoin en définissant la propriété ComputeRoutesRequest.fields, comme indiqué dans l'extrait de code suivant :

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.
};

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.
};

Spécifier des lieux pour un itinéraire

Pour calculer un itinéraire, vous devez spécifier au minimum les emplacements de départ et de destination de l'itinéraire, ainsi qu'un masque de champ. Vous pouvez également spécifier des points de cheminement intermédiaires le long d'un itinéraire et les utiliser pour effectuer d'autres actions, comme ajouter des arrêts ou des points de passage le long d'un itinéraire.

Dans ComputeRoutesRequest, vous pouvez spécifier un emplacement de l'une des manières suivantes :

Vous pouvez spécifier les lieux de tous les points de cheminement d'une requête de la même manière ou les combiner. Par exemple, vous pouvez utiliser des coordonnées de latitude/longitude pour le point de cheminement de départ et un objet Place pour le point de cheminement de destination.

Pour plus d'efficacité et de précision, utilisez des objets Place au lieu de coordonnées de latitude/longitude ou de chaînes d'adresse. Les ID de lieu sont uniques et explicites. Ils offrent des avantages de géocodage pour le routage, tels que les points d'accès et les variables de trafic. Ils permettent d'éviter les situations suivantes, qui peuvent résulter d'autres méthodes de spécification d'un emplacement :

  • Si vous utilisez des coordonnées de latitude/longitude, l'emplacement peut être aligné sur la route la plus proche de ces coordonnées, qui n'est peut-être pas un point d'accès à l'établissement, ni même une route qui mène rapidement ou en toute sécurité à la destination.
  • Les chaînes d'adresse doivent d'abord être géocodées par l'API Routes pour les convertir en coordonnées de latitude/longitude avant de pouvoir calculer un itinéraire. Cette conversion peut affecter les performances.

Spécifier un emplacement en tant qu'objet Place (recommandé)

Pour spécifier un emplacement à l'aide d'un lieu, créez une instance Place. L'extrait de code suivant montre comment créer des instances Place pour origin et destination, puis les utiliser dans un ComputeRoutesRequest :

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.
};

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.
};

Coordonnées de latitude/longitude

Pour spécifier un emplacement sous forme de coordonnées de latitude/longitude, créez une instance google.maps.LatLngLiteral, google.maps.LatLngAltitude ou google.maps.LatLngAltitudeLiteral. L'extrait de code suivant montre comment créer des instances google.maps.LatLngLiteral pour origin et destination, puis les utiliser dans un computeRoutesRequest :

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'],
};

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'],
};

Chaîne d'adresse

Les chaînes d'adresse sont des adresses littérales représentées par une chaîne (par exemple, "1600 Amphitheatre Parkway, Mountain View, CA"). Le geocoding consiste à convertir une chaîne d'adresse en coordonnées de latitude et de longitude (par exemple, latitude 37.423021 et longitude -122.083739).

Lorsque vous transmettez une chaîne d'adresse comme emplacement d'un point de cheminement, la bibliothèque Routes géocode la chaîne en interne pour la convertir en coordonnées de latitude et de longitude.

L'extrait de code suivant montre comment créer un ComputeRoutesRequest avec une chaîne d'adresse pour origin et destination :

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'],
};

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'],
};

Définir la région de l'adresse

Si vous transmettez une chaîne d'adresse incomplète comme emplacement d'un point de cheminement, l'API risque d'utiliser des coordonnées de latitude/longitude géocodées incorrectes. Par exemple, vous envoyez une requête en spécifiant "Toledo" comme point de départ et "Madrid" comme destination pour un itinéraire en voiture :

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

Dans cet exemple, "Toledo" est interprété comme une ville de l'État de l'Ohio aux États-Unis, et non en Espagne. Par conséquent, la requête renvoie un tableau vide, ce qui signifie qu'aucune route n'existe.

Vous pouvez configurer l'API pour qu'elle renvoie des résultats pondérés en faveur d'une région en particulier en incluant le paramètre regionCode. Ce paramètre spécifie le code régional sous la forme d'une valeur ccTLD (domaine de premier niveau) à deux caractères. La plupart des codes ccTLD sont identiques aux codes ISO 3166-1, à quelques exceptions près. Par exemple, le ccTLD du Royaume-Uni est "uk" (.co.uk), tandis que son code ISO 3166-1 est "gb" (techniquement pour l'entité "Royaume-Uni de Grande-Bretagne et d'Irlande du Nord").

Une demande d'itinéraire de "Toledo" à "Madrid" incluant le paramètre regionCode renvoie des résultats appropriés, car "Toledo" est interprété comme une ville d'Espagne :

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

Plus Code

De nombreuses personnes n'ont pas d'adresse précise, ce qui peut compliquer la réception de livraisons. Il se peut également que les personnes disposant d'une adresse préfèrent accepter les livraisons à des emplacements plus spécifiques, comme une entrée arrière ou un quai de chargement.

Les Plus Codes sont comme des adresses postales pour les personnes ou les lieux qui n'ont pas d'adresse réelle. Contrairement aux adresses avec des noms de rue et des numéros, les Plus Codes sont basés sur des coordonnées de latitude/longitude et sont affichés sous forme de chiffres et de lettres.

Google a développé les Plus Codes pour que tout le monde et tous les lieux puissent bénéficier d'une adresse. Un Plus Code est une référence de lieu encodée, calculée à partir de coordonnées de latitude et de longitude, qui représente une zone : 1/8000e de degré par 1/8000e de degré (environ 14 m x 14 m à l'équateur) ou moins. Vous pouvez utiliser des Plus Codes pour remplacer les adresses postales dans les endroits où elles n'existent pas, ou lorsque les bâtiments ne sont pas numérotés ni nommés.

Les Plus Codes doivent être mis en forme comme un code global ou un code composé :

  • Le code global est composé d'un indicatif de zone de 4 caractères et d'un code local à 6 caractères ou plus. Par exemple, pour l'adresse "1600 Amphitheatre Parkway, Mountain View, CA", le code global est "849V" et le code local est "CWC8+R9". Vous utilisez ensuite l'intégralité du Plus Code à 10 caractères pour spécifier la valeur de l'emplacement, soit "849VCWC8+R9".
  • Le code composé est constitué d'un code local à six caractères ou plus associé à un emplacement explicite. Par exemple, l'adresse "450 Serra Mall, Stanford, CA 94305, USA" a pour code local "CRHJ+C3". Pour une adresse composée, combinez le code local avec la ville, l'État, le code postal et le pays de l'adresse, sous la forme "CRHJ+C3 Stanford, CA 94305, USA".

L'extrait de code suivant montre comment calculer un itinéraire en spécifiant un point de cheminement pour le point de départ et la destination de l'itinéraire à l'aide de Plus Codes :

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'],
};

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'],
};