레이어
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
레이어는 하나 이상의 별개 항목으로 구성된 지도상의 객체이지만 단일 단위로 조작할 수 있습니다. 일반적으로 레이어는 지도 위에 추가한 객체의 모음을 반영하여 공통된 연관 관계를 지정합니다. Maps JavaScript API는 구성 항목을 하나의 객체(일반적으로 타일 오버레이)로 렌더링하고 지도의 표시 영역이 변경되면 객체를 표시하여 레이어 내 객체의 표시를 관리합니다. 또한 레이어는 레이어와 일치하는 방식으로 기본 타일을 약간 변경하여 지도 자체의 표시 레이어를 변경할 수도 있습니다. 대부분의 레이어는 개별 객체를 통해 액세스할 수 없도록 설계되었지만 하나의 단위로만 조작할 수 있습니다.
레이어 개요
Maps JavaScript API에는 다음과 같은 여러 유형의 레이어가 있습니다.
- Google 지도 데이터 레이어는 임의의 지리 공간 데이터를 위한 컨테이너를 제공합니다.
데이터 레이어를 사용하여 맞춤 데이터를 저장하거나 Google 지도에 GeoJSON 데이터를 표시할 수 있습니다.
- 히트맵 레이어는 히트맵 시각화를 사용하여 지리 데이터를 렌더링합니다.
- KML 레이어는 KML 및 GeoRSS 요소를 Maps JavaScript API 타일 오버레이로 렌더링합니다.
- 교통정보 레이어는 지도에 교통상황을 표시합니다.
- 대중교통 레이어는 지도에 도시의 대중교통 네트워크를 표시합니다.
- 자전거 레이어 객체는 자전거 전용도로 또는 자전거 관련 오버레이를 일반 레이어로 렌더링합니다. 이동 수단 자전거의 경로를 요청하면 DirectionsRenderer 내에서 기본적으로 이 레이어가 반환됩니다.
레이어 추가
지도에 레이어를 추가하려면 setMap()
을 호출하고 레이어를 표시할 지도 객체에 전달해야 합니다. 마찬가지로 레이어를 숨기려면 setMap()
을 호출하여 null
을 전달하세요.
아래의 스니펫은 영국 런던을 지도의 중앙에 배치하고 대중교통 레이어를 추가합니다.
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(51.5,-0.11)
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-08-06(UTC)
[null,null,["최종 업데이트: 2025-08-06(UTC)"],[[["\u003cp\u003eLayers in Maps JavaScript API are objects consisting of multiple items that are treated as a single unit and often represent collections of objects on the map.\u003c/p\u003e\n"],["\u003cp\u003eThe API provides various layer types, including Data, Heatmap, KML, Traffic, Transit, and Bicycling layers, each serving a distinct purpose for displaying geospatial data.\u003c/p\u003e\n"],["\u003cp\u003eYou can easily add or hide a layer by calling the \u003ccode\u003esetMap()\u003c/code\u003e method, providing the map object or \u003ccode\u003enull\u003c/code\u003e respectively.\u003c/p\u003e\n"],["\u003cp\u003eThe example code demonstrates adding a Transit layer to a map centered on London.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/android-sdk/utility/multilayer \"View this page for the Android platform docs.\") [JavaScript](/maps/documentation/javascript/layers \"View this page for the JavaScript platform docs.\")\n\nLayers are objects on the map that consist of one or more separate items,\nbut are manipulated as a single unit. Layers generally reflect collections of\nobjects that you add on top of the map to designate a common association. The\nMaps JavaScript API manages the presentation of objects within layers\nby rendering their constituent items into one object (typically a tile overlay) and\ndisplaying them as the map's viewport changes. Layers may also alter the presentation\nlayer of the map itself, slightly altering the base tiles in a fashion\nconsistent with the layer. Note that most layers, by design, may not be\naccessed via their individual objects, but may only be manipulated as a\nunit.\n\nLayers Overview\n\nThe Maps JavaScript API has several types of layers:\n\n- The [**Google Maps Data\n layer**](/maps/documentation/javascript/datalayer) provides a container for arbitrary geospatial data. You can use the Data layer to store your custom data, or to display GeoJSON data on a Google map.\n- The [**Heatmap layer**](/maps/documentation/javascript/heatmaplayer) renders geographic data using a *Heatmap* visualization.\n- The [**KML layer**](/maps/documentation/javascript/kmllayer) renders KML and GeoRSS elements into a Maps JavaScript API tile overlay.\n- The [**Traffic layer**](/maps/documentation/javascript/trafficlayer#traffic_layer) displays traffic conditions on the map.\n- The [**Transit layer**](/maps/documentation/javascript/trafficlayer#transit_layer) displays the public transport network of your city on the map.\n- The [**Bicycling layer**](/maps/documentation/javascript/trafficlayer#bicycling_layer) object renders a layer of bike paths and/or bicycle-specific overlays into a common layer. This layer is returned by default within the **DirectionsRenderer** when requesting directions of travel mode **BICYCLING**.\n\nAdd a layer\n\nTo add a layer to a map, you only need to call `setMap()`,\npassing it the map object on which to display the layer. Similarly, to hide a\nlayer, call `setMap()`, passing `null`.\n\nThe below snippet centers the map on London, UK, and adds the [Transit\nlayer](/maps/documentation/javascript/trafficlayer#transit_layer). \n\n```javascript\nvar mapOptions = {\n zoom: 13,\n center: new google.maps.LatLng(51.5,-0.11)\n}\n\nvar map = new google.maps.Map(document.getElementById(\"map\"), mapOptions);\n\nvar transitLayer = new google.maps.TransitLayer();\ntransitLayer.setMap(map);\n```"]]