Lapisan Lalu Lintas, Transportasi Umum, dan Bersepeda
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Lapisan Lalu Lintas, Transportasi Umum, dan Bersepeda memodifikasi lapisan peta dasar untuk menampilkan kondisi lalu lintas, jaringan transportasi umum setempat, atau informasi rute bersepeda saat ini.
Lapisan ini tersedia di wilayah tertentu.
Lapisan Lalu Lintas
Maps JavaScript API memungkinkan Anda menambahkan informasi lalu lintas secara real-time (jika didukung) ke peta Anda menggunakan objek TrafficLayer. Informasi lalu lintas diperbarui secara berkala, namun tidak secara instan. Permintaan yang cepat dan berturut-turut untuk area yang sama cenderung tidak memberikan hasil yang berbeda.
Maps JavaScript API memungkinkan Anda menampilkan jaringan transportasi umum kota pada peta menggunakan objek TransitLayer. Jika Lapisan Transportasi Umum diaktifkan, dan peta diposisikan di tengah kota yang mendukung informasi transportasi umum, peta akan menampilkan jalur transportasi umum utama sebagai garis tebal yang berwarna. Warna garis ditetapkan berdasarkan informasi dari operator jalur transportasi umum. Mengaktifkan Lapisan Transportasi Umum akan mengubah gaya peta dasar menjadi lebih menekankan rute transportasi umum.
Jika Anda bekerja di lembaga pemerintah yang mengawasi transportasi umum untuk kota Anda dan ingin data Anda disertakan, kunjungi situs Program Partner Google Transit untuk mempelajari lebih lanjut.
Contoh berikut menampilkan Lapisan Transportasi Umum yang diaktifkan pada peta London, Inggris Raya:
Maps JavaScript API memungkinkan Anda menambahkan informasi sepeda ke peta menggunakan objek BicyclingLayer. BicyclingLayer merender lapisan jalur sepeda, rute sepeda yang disarankan, dan overlay lain yang khusus digunakan untuk bersepeda di atas peta tertentu. Selain itu, lapisan mengubah gaya peta dasar itu sendiri untuk memperjelas jalan yang mendukung rute sepeda dan mengurangi kejelasan pada jalan yang tidak cocok untuk sepeda.
Contoh berikut menampilkan lapisan Sepeda yang diaktifkan pada peta Cambridge, MA:
Rute hijau tua menunjukkan rute khusus bersepeda. Rute hijau muda menunjukkan jalan dengan "jalur sepeda" khusus. Rute putus-putus menunjukkan jalan atau jalur yang direkomendasikan untuk penggunaan sepeda.
[null,null,["Terakhir diperbarui pada 2025-08-31 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,["# 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."]]