レイヤ
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
レイヤは、1 種類以上のアイテムで構成される地図上のオブジェクトですが、単一のユニットとして操作されます。通常、レイヤは、共通の関連性を指定するために地図上に追加したオブジェクトの集合を表します。Maps JavaScript API では、レイヤ内のオブジェクトの表示を処理するために、レイヤを構成しているアイテムを 1 つのオブジェクト(通常はタイル オーバーレイ)にレンダリングし、地図のビューポートの変更に従って表示します。レイヤでは、地図自体のプレゼンテーション レイヤも変更できます。これは、レイヤと整合させながらベースタイルをわずかに変更することで行います。大部分のレイヤは、設計上、その個別のオブジェクトからはアクセスできませんが、ユニットとして操作できます。
レイヤの概要
Maps JavaScript API には、いくつかのタイプのレイヤがあります。
- Google マップのデータレイヤには、任意の地理空間データを格納するコンテナがあります。データレイヤを使うと、カスタムデータを保存したり、Google マップ上に GeoJSON データを表示したりできます。
-
ヒートマップ レイヤは、ヒートマップの可視化によって地理データをレンダリングします。
-
KML レイヤは、KML 要素と GeoRSS 要素を Maps JavaScript API のタイル オーバーレイにレンダリングします。
- 交通状況レイヤは、地図に交通状況を表示します。
-
乗換案内レイヤは、都市の公共交通機関のネットワークを地図に表示します。
- 自転車レイヤ オブジェクトは、自転車専用道路や自転車用のオーバーレイのレイヤを、共通のレイヤにレンダリングします。このレイヤは、デフォルトでは、移動手段が「BICYCLING」のルートがリクエストされたときに、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);
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は 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```"]]