Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Trafik, Toplu Taşıma ve Bisiklet katmanları, mevcut trafik koşullarını, yerel toplu taşıma ağlarını veya bisiklet rota bilgilerini görüntülemek için ana harita katmanını değiştirir. Bu katmanlar belirli bölgelerde kullanılabilir.
Trafik Katmanı
Maps JavaScript API, TrafficLayernesnesi aracılığıyla haritalara gerçek zamanlı trafik bilgileri (desteklendiği yerlerde) eklemenize olanak tanır. Trafik bilgileri sık sık yenilenir ancak anlık olarak yenilenmez. Aynı bölge için art arda hızlıca gönderilen isteklerin farklı sonuçlar vermesi olası değildir.
Maps JavaScript API, TransitLayer nesnesini kullanarak bir şehrin toplu taşıma ağını haritanızda görüntülemenize olanak tanır. Toplu Taşıma Katmanı etkinleştirildiğinde ve harita, toplu taşıma bilgilerini destekleyen bir şehrin ortasına yerleştirildiğinde, ana toplu taşıma hatları kalın ve renkli çizgilerle gösterilir. Hatların rengi, toplu taşıma hattı operatöründen alınan bilgilere göre belirlenir. Toplu Taşıma Katmanı etkinleştirildiğinde, toplu taşıma rotaları daha belirgin hale gelecek şekilde temel haritanın stili değiştirilir.
Şehrinizde toplu taşımayı denetleyen bir kamu kuruluşuysanız ve verilerinizin dahil edilmesini istiyorsanız daha fazla bilgi edinmek için lütfen Google Toplu Taşıma İş Ortağı Programı sitesini ziyaret edin.
Aşağıdaki örnekte, Birleşik Krallık'taki Londra haritasında toplu taşıma katmanının etkinleştirildiği gösterilmektedir:
Maps JavaScript API, BicyclingLayer nesnesini kullanarak haritalara bisiklet bilgileri eklemenize olanak tanır. BicyclingLayer, belirli bir haritanın üzerine bisiklet yolları, önerilen bisiklet rotaları ve bisiklet kullanımına özgü diğer yer paylaşımlarını içeren bir katman oluşturur. Ayrıca katman, bisiklet rotalarını destekleyen sokakları vurgulamak ve bisikletler için uygun olmayan sokakları vurgulamamak amacıyla temel haritanın stilini değiştirir.
Aşağıdaki örnekte, Cambridge, MA haritasında Bisiklet katmanının etkinleştirildiği gösterilmektedir:
Koyu yeşil rotalar, bisikletlere özel rotaları gösterir. Açık yeşil rotalar, özel "bisiklet şeritlerine" sahip sokakları gösterir. Kesikli rotalar, bisiklet kullanımı için önerilen diğer sokakları veya yolları gösterir.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 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."]]
