교통정보, 대중교통 및 자전거 레이어는 기본 지도 레이어를 수정하여 현재 교통상황, 지역 대중교통 네트워크 또는 자전거 경로 정보를 표시합니다. 이러한 레이어는 일부 지역에서 사용할 수 있습니다.
교통정보 레이어
Maps JavaScript API를 사용하면 TrafficLayer 객체를 사용하여 지도에 실시간 교통정보를 추가할 수 있습니다(지원되는 경우). 교통정보는 자주 갱신되지만 즉시 갱신되지는 않습니다. 동일한 지역에 대한 정보를 연속으로 빠르게 요청해도 결과가 달라질 가능성은 작습니다.
Maps JavaScript API를 사용하면 TransitLayer 객체를 사용하여 지도에 도시의 대중교통 네트워크를 표시할 수 있습니다. 대중교통 레이어가 사용 설정되고 대중교통 정보를 지원하는 도시가 지도의 중심에 있으면 지도에 주요 대중교통 노선이 색상이 지정된 굵은 선으로 표시됩니다. 선의 색상은 대중교통 노선 운영업체가 제공하는 정보를 기반으로 설정됩니다. 대중교통 레이어를 사용 설정하면 대중교통 경로를 더 강조표시할 수 있도록 기본 지도의 스타일이 변경됩니다.
도시의 대중교통을 관할하는 공공 기관의 경우 Google 대중교통 파트너 프로그램 사이트를 방문하여 자세한 데이터 등록 방법을 확인할 수 있습니다.
Maps JavaScript API를 사용하면 BicyclingLayer 객체를 사용하여 지도에 자전거 정보를 추가할 수 있습니다. BicyclingLayer는 지정된 지도 위에 자전거 경로 레이어, 추천 자전거 경로 및 기타 자전거 이용과 관련된 오버레이를 렌더링합니다. 또한 이 레이어는 자전거 경로를 지원하는 도로를 강조하고 자전거에 적절하지 않은 도로를 강조하지 않기 위해 기본 지도의 스타일을 변경합니다.
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 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."]]
