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 informations sur l'itinéraire, telles que la distance, le temps de trajet estimé, les péages prévus et des instructions détaillées.
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 computeRoutes()
méthode 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.
// 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);
Choisir 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.
L'utilisation d'un masque de champ vous permet également de ne pas demander de données inutiles, ce qui contribue à réduire la latence de la réponse et à éviter 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
ComputeRoutesRequest.fields
propriété, comme indiqué dans l'extrait 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 lieux de départ et d'arrivée, 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 ajouter des arrêts ou des points de passage.
Dans ComputeRoutesRequest, vous pouvez spécifier un lieu de l'une des manières suivantes
:
- Lieu (rôle à privilégier)
- Coordonnées de latitude/longitude
- Chaîne d'adresse ("Chicago, IL" ou "Darwin, NT, Australie")
- Plus Code
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 chaînes d'adresse. Les ID de lieu sont explicitement uniques et offrent des avantages en termes de geocoding pour le calcul d'itinéraire 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 façons de spécifier un lieu :
- L'utilisation de coordonnées de latitude/longitude peut entraîner l'ancrage du lieu à la route la plus proche de ces coordonnées, qui peut ne pas être un point d'accès à la propriété, 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 être converties en coordonnées de latitude/longitude avant de pouvoir calculer un itinéraire. Cette conversion peut avoir des conséquences sur les performances.
Spécifier un lieu en tant qu'objet Place (rôle à privilégier)
Pour spécifier un lieu à l'aide d'un lieu, créez une instance Place. L'extrait suivant montre comment créer de nouvelles instances Place pour origin et destination, puis les utiliser dans une 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 lieu en tant que coordonnées de latitude/longitude, créez une instance
google.maps.LatLngLiteral, google.maps.LatLngAltitude, ou
google.maps.LatLngAltitudeLiteral. L'extrait suivant montre comment créer
de nouvelles google.maps.LatLngLiteral instances 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 lieu d'un point de cheminement, la bibliothèque Routes géocode en interne la chaîne pour la convertir en coordonnées de latitude et de longitude.
L'extrait suivant montre comment créer une 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 lieu d'un point de cheminement, l'API peut utiliser des coordonnées de latitude/longitude géocodées incorrectes. Par exemple, vous envoyez une requête 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'Ohio aux États-Unis, et non en Espagne. Par conséquent, la requête renvoie un tableau vide, ce qui signifie qu'aucun itinéraire 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 (TLD pour top-level domain, 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 requête d'itinéraire de "Toledo" à "Madrid" qui inclut 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 rendre difficile la réception de leurs livraisons. D'autres personnes ayant une adresse peuvent préférer accepter les livraisons à des endroits plus spécifiques , comme une entrée arrière ou un quai de chargement.
Les Plus Codes fonctionnent comme des adresses postales pour les personnes ou les lieux qui n'en ont pas. Contrairement aux adresses avec des noms et des numéros de rue, ils sont basés sur la latitude et la longitude coordonnées, et sont affichés sous forme de numéros et de lettres.
Google a développé les Plus Codes pour que tout le monde puisse bénéficier des avantages des adresses. 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 où 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 quatre caractères et d'un code local de six 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 le Plus Code complet de 10 caractères pour spécifier la valeur du lieu comme "849VCWC8+R9".
- Le code composé est composé d'un code local de six caractères ou plus combiné à un lieu explicite. Par exemple, l'adresse "450 Serra Mall, Stanford, CA 94305, USA" a un code local "CRHJ+C3". Pour une adresse composée, combinez le code local avec la ville, l'État, le code postal et la partie pays de l'adresse au format "CRHJ+C3 Stanford, CA 94305, USA".
L'extrait suivant montre comment calculer un itinéraire en spécifiant un point de cheminement pour le point de départ et la destination à 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'], };