Lapisan
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Pilih platform:
Android
JavaScript
Lapisan adalah objek di peta yang terdiri dari satu atau beberapa item terpisah, tetapi dimanipulasi sebagai unit tunggal. Lapisan umumnya menggambarkan kumpulan objek yang Anda tambahkan ke atas peta untuk menunjukkan hubungan kesamaan. Maps JavaScript API mengelola penyajian objek dalam lapisan dengan merender item konstituennya menjadi satu objek (biasanya overlay petak peta) dan menampilkannya saat area pandang peta berubah. Lapisan juga dapat mengubah lapisan penyajian peta itu sendiri, yang sedikit mengubah petak peta dasarnya secara konsisten dengan lapisan. Perlu diingat bahwa sebagian besar lapisan, sesuai desainnya, tidak dapat
diakses melalui masing-masing objeknya, melainkan hanya dapat direkayasa sebagai satu
kesatuan.
Ringkasan Lapisan
Maps JavaScript API memiliki beberapa jenis lapisan:
- Lapisan Google Maps Data menyediakan penampung untuk data geospasial arbitrer.
Anda dapat menggunakan lapisan Data untuk menyimpan data kustom, atau untuk menampilkan data GeoJSON pada peta Google.
-
Lapisan peta panas merender data geografis menggunakan
visualisasi Peta panas.
-
Lapisan KML merender elemen KML dan GeoRSS menjadi overlay petak peta Maps JavaScript API.
-
Lapisan lalu lintas menampilkan kondisi lalu lintas pada peta.
-
Lapisan transportasi umum menampilkan jaringan transportasi umum
kota Anda pada peta.
- Objek
Lapisan bersepeda merender lapisan jalur sepeda
dan/atau overlay khusus sepeda ke dalam lapisan umum. Lapisan ini ditampilkan
secara default dalam DirectionsRenderer saat meminta
rute mode perjalanan BERSEPEDA.
Menambahkan lapisan
Untuk menambahkan lapisan ke peta, Anda hanya perlu memanggil metode setMap()
, dengan meneruskan objek peta yang akan menampilkan lapisan ke metode tersebut. Demikian pula, untuk menyembunyikan lapisan, panggil metode setMap()
, dengan meneruskan null
ke metode tersebut.
Cuplikan di bawah ini memusatkan peta di London, Inggris Raya, dan menambahkan lapisan
Transportasi Umum.
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);
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-06 UTC.
[null,null,["Terakhir diperbarui pada 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```"]]