Calques de trafic, de trajets et de trajets à vélo
Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
Les calques Trafic, Transports en commun et À vélo modifient le calque de carte de base pour afficher les conditions de circulation en temps réel ou des informations sur les itinéraires en transports en commun et à vélo. Ces calques sont disponibles dans certaines régions seulement.
Calque Trafic
L'API Maps JavaScript vous permet d'ajouter à vos cartes des informations en temps réel sur les conditions de circulation (dans certaines régions seulement) au moyen de l'objet TrafficLayer. Les informations sur le trafic sont actualisées fréquemment, mais pas instantanément. Il est peu probable que les requêtes rapides consécutives pour la même zone produisent des résultats différents.
L'API Maps JavaScript permet d'afficher sur votre carte le réseau de transport en commun d'une ville au moyen de l'objet TransitLayer. Lorsque le calque Transit est activé et que la carte est centrée sur une ville qui prend en charge les informations sur les transports en commun, la carte affiche les principales lignes de transport en commun sous la forme de lignes de couleur au trait épais. La couleur de la ligne est définie en fonction des informations fournies par la régie des transports concernée. Activer le calque Transit modifie le style de la carte de base pour mieux mettre en évidence les itinéraires de transport en commun.
Si vous travaillez dans une agence publique qui supervise les transports en commun de votre ville et que vous souhaitez ajouter vos données, veuillez consulter le site du Programme de partenariat Google Transports en commun pour en savoir plus.
L'exemple suivant montre le calque Transit activé sur une carte de Londres, au Royaume-Uni.
L'API Maps JavaScript permet d'ajouter à vos cartes des informations sur les itinéraires à vélo au moyen de l'objet BicyclingLayer. L'objet BicyclingLayer affiche au-dessus d'une carte donnée un calque représentant des pistes cyclables, des suggestions d'itinéraires à vélo et autres superpositions spécifiques à l'usage du vélo. Ce calque modifie par ailleurs le style de la carte de base pour mettre en avant les rues dotées de pistes cyclables et, au contraire, atténuer les rues déconseillées pour le vélo.
L'exemple suivant montre le calque Bicycle activé sur une carte de Cambridge, dans le Massachusetts :
Les itinéraires en vert foncé désignent des voies réservées aux vélos. Les itinéraires en vert clair indiquent les rues dotées de bandes cyclables. Les itinéraires en pointillés désignent des rues ou chemins recommandés pour le vélo.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/10 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/08/10 (UTC)."],[[["\u003cp\u003eThe Maps JavaScript API offers Traffic, Transit, and Bicycling layers to enhance the base map with real-time information.\u003c/p\u003e\n"],["\u003cp\u003eThese layers provide data on current traffic conditions, public transit networks, and bicycle routes, respectively.\u003c/p\u003e\n"],["\u003cp\u003eThe layers are implemented using \u003ccode\u003eTrafficLayer\u003c/code\u003e, \u003ccode\u003eTransitLayer\u003c/code\u003e, and \u003ccode\u003eBicyclingLayer\u003c/code\u003e objects and are available in select regions.\u003c/p\u003e\n"],["\u003cp\u003eTransit Layer data is sourced from the Google Transit Partner Program, and public agencies can contribute their city's data.\u003c/p\u003e\n"],["\u003cp\u003eBicycling Layer visually differentiates dedicated bike routes, bike lanes, and recommended paths using varying colors and styles.\u003c/p\u003e\n"]]],["The core content describes how to use the Maps JavaScript API to overlay traffic, transit, and bicycling information on maps. The `TrafficLayer` displays real-time traffic conditions, refreshing frequently. The `TransitLayer` shows a city's public transit network, highlighting major lines. The `BicyclingLayer` adds bike paths and recommended routes. Each layer alters the base map's style. Each layer provides examples in TypeScript and JavaScript, and includes the use of `TrafficLayer`, `TransitLayer`, or `BicyclingLayer` objects with `setMap`.\n"],null,["The Traffic, Transit, and Bicycling layers modify the base map layer to display\ncurrent traffic conditions, local transit networks, or bicycling route information.\nThese layers are available in [select regions](/maps/coverage).\n\nTraffic Layer\n\nThe Maps JavaScript API allows you to add real-time traffic\ninformation (where supported) to your maps using the `TrafficLayer`\nobject. Traffic information is refreshed frequently, but not instantly. Rapid\nconsecutive requests for the same area are unlikely to yield different\nresults. \n\nTypeScript \n\n```typescript\nfunction initMap(): void {\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n zoom: 13,\n center: { lat: 34.04924594193164, lng: -118.24104309082031 },\n }\n );\n\n const trafficLayer = new google.maps.TrafficLayer();\n\n trafficLayer.setMap(map);\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/layer-traffic/index.ts#L8-L27\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 13,\n center: { lat: 34.04924594193164, lng: -118.24104309082031 },\n });\n const trafficLayer = new google.maps.TrafficLayer();\n\n trafficLayer.setMap(map);\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/layer-traffic/docs/index.js#L7-L17\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n[View example](/maps/documentation/javascript/examples/layer-traffic)\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/layer-traffic/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-layer-traffic&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nTransit Layer\n\nThe Maps JavaScript API allows you to display the public transit network of a city\non your map using the [`TransitLayer`](/maps/documentation/javascript/reference#TrafficLayer)\nobject. When the Transit Layer is enabled, and the map is centered on a city\nthat supports transit information, the map will display major transit lines as\nthick, colored lines. The color of the line is set based upon information from\nthe transit line operator. Enabling the Transit Layer will alter the style of\nthe base map to better emphasize transit routes.\n\nIf you're a public agency that oversees public transportation for your city and\nwould like your data to be included, please visit\nthe [Google Transit Partner\nProgram](https://maps.google.com/help/maps/mapcontent/transit/) site to learn more.\n\nThe following example shows the Transit layer enabled on a map of London, UK: \n\nTypeScript \n\n```typescript\nfunction initMap(): void {\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n zoom: 13,\n center: { lat: 51.501904, lng: -0.115871 },\n }\n );\n\n const transitLayer = new google.maps.TransitLayer();\n\n transitLayer.setMap(map);\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/layer-transit/index.ts#L8-L27\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 13,\n center: { lat: 51.501904, lng: -0.115871 },\n });\n const transitLayer = new google.maps.TransitLayer();\n\n transitLayer.setMap(map);\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/layer-transit/docs/index.js#L7-L17\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n[View example](/maps/documentation/javascript/examples/layer-transit)\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/layer-transit/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-layer-transit&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nBicycling Layer\n\nThe Maps JavaScript API allows you to add bicycle information to your maps using\nthe `BicyclingLayer` object. The `BicyclingLayer` renders a layer of bike\npaths, suggested bike routes and other overlays specific to bicycling usage on\ntop of the given map. Additionally, the layer alters the style of the base map\nitself to emphasize streets supporting bicycle routes and de-emphasize streets\ninappropriate for bicycles.\n\nThe following example shows the Bicycle layer enabled on a map of\nCambridge, MA: \n\nTypeScript \n\n```typescript\nfunction initMap(): void {\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n zoom: 14,\n center: { lat: 42.3726399, lng: -71.1096528 },\n }\n );\n\n const bikeLayer = new google.maps.BicyclingLayer();\n\n bikeLayer.setMap(map);\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/layer-bicycling/index.ts#L8-L27\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 14,\n center: { lat: 42.3726399, lng: -71.1096528 },\n });\n const bikeLayer = new google.maps.BicyclingLayer();\n\n bikeLayer.setMap(map);\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/layer-bicycling/docs/index.js#L7-L17\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n[View example](/maps/documentation/javascript/examples/layer-bicycling)\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/layer-bicycling/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-layer-bicycling&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nDark green routes indicated dedicated bicycle routes. Light green routes\nindicate streets with dedicated \"bike lanes.\" Dashed routes indicate streets or\npaths otherwise recommended for bicycle usage."]]