با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
لایههای Traffic، Transit و Bicycling لایه نقشه پایه را برای نمایش وضعیت ترافیک فعلی، شبکههای حمل و نقل محلی یا اطلاعات مسیر دوچرخهسواری تغییر میدهند. این لایه ها در مناطق انتخابی موجود هستند.
لایه ترافیک
Maps JavaScript API به شما این امکان را میدهد تا با استفاده از شی TrafficLayer ، اطلاعات ترافیک بلادرنگ (در صورت پشتیبانی) را به نقشههای خود اضافه کنید. اطلاعات ترافیک اغلب به روز می شود، اما نه فورا. بعید است درخواست های متوالی سریع برای یک منطقه نتایج متفاوتی به همراه داشته باشد.
Maps JavaScript API به شما امکان می دهد شبکه حمل و نقل عمومی یک شهر را با استفاده از شی TransitLayer روی نقشه خود نمایش دهید. هنگامی که لایه ترانزیت فعال است، و نقشه بر روی شهری است که از اطلاعات حمل و نقل پشتیبانی می کند، نقشه خطوط اصلی حمل و نقل را به صورت خطوط ضخیم و رنگی نشان می دهد. رنگ خط بر اساس اطلاعات اپراتور خط حمل و نقل تنظیم می شود. فعال کردن لایه ترانزیت، سبک نقشه پایه را تغییر میدهد تا بر مسیرهای ترانزیت تأکید بیشتری داشته باشد.
اگر شما یک سازمان دولتی هستید که بر حمل و نقل عمومی شهرتان نظارت دارد و میخواهید دادههای شما درج شود، لطفاً برای کسب اطلاعات بیشتر از سایت Google Transit Partner Program دیدن کنید.
مثال زیر لایه حمل و نقل فعال را بر روی نقشه لندن، انگلستان نشان می دهد:
Maps JavaScript API به شما امکان می دهد با استفاده از شی BicyclingLayer اطلاعات دوچرخه را به نقشه های خود اضافه کنید. BicyclingLayer لایهای از مسیرهای دوچرخه، مسیرهای دوچرخهسواری پیشنهادی و دیگر پوششهای مخصوص استفاده از دوچرخهسواری را در بالای نقشه داده شده ارائه میکند. علاوه بر این، این لایه سبک خود نقشه پایه را تغییر میدهد تا بر خیابانهایی که مسیرهای دوچرخهسواری را پشتیبانی میکنند تأکید کند و خیابانهای نامناسب برای دوچرخهها را بیاهمیت کند.
مثال زیر لایه Bicycle را بر روی نقشه ای از کمبریج، MA را نشان می دهد:
مسیرهای سبز تیره مسیرهای مخصوص دوچرخه را نشان می داد. مسیرهای سبز روشن خیابانهایی را نشان میدهند که «خطهای دوچرخهسواری» اختصاصی دارند. مسیرهای نقطه چین نشان دهنده خیابان ها یا مسیرهایی هستند که در غیر این صورت برای استفاده از دوچرخه توصیه می شوند.
تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-08-29 بهوقت ساعت هماهنگ جهانی."],[[["\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,["# Traffic, Transit, and Bicycling Layers\n\nThe 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-------------\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\n### TypeScript\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\n### JavaScript\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\n### Try Sample\n\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-------------\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\n### TypeScript\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\n### JavaScript\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\n### Try Sample\n\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---------------\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\n### TypeScript\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\n### JavaScript\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\n### Try Sample\n\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."]]