Referensi JSON untuk gaya visual peta berbasis cloud

Pilih platform: Android iOS JavaScript Layanan Web

Skema JSON untuk gaya visual peta berbasis cloud memungkinkan Anda menggunakan JSON untuk menyesuaikan peta seperti yang Anda lakukan melalui antarmuka editor gaya. Dokumen ini menjelaskan skema JSON dan cara membuat deklarasi gaya JSON.

Download skema JSON

Untuk mempelajari cara mengedit gaya peta menggunakan JSON dalam editor gaya, atau untuk mengimpor dan mengekspor gaya peta, lihat Menggunakan JSON dengan gaya visual peta berbasis cloud.

Lihat contoh deklarasi gaya JSON

Deklarasi gaya JSON berikut menetapkan warna latar belakang, lalu menentukan gaya untuk lokasi menarik, taman, fitur air, dan menyembunyikan label untuk lokasi makanan dan minuman.


{
  "variant": "light",
  "styles": [
    {
      "id": "natural.land",
      "geometry": {
        "fillColor": "#f7e3f7"
      }
    },
    {
      "id": "natural.water",
      "geometry": {
        "fillColor": "#d4b2ff"
      },
      "label": {
        "textFillColor": "#3d2163",
        "textStrokeColor": "#f0e1ff"
      }
    },
    {
      "id": "pointOfInterest",
      "label": {
        "pinFillColor": "#e0349a",
        "textFillColor": "#a11e6e",
        "textStrokeColor": "#ffd9f0"
      }
    },
    {
      "id": "pointOfInterest.emergency.hospital",
      "geometry": {
        "fillColor": "#ffe3e3"
      }
    },
    {
      "id": "pointOfInterest.foodAndDrink",
      "label": {
        "visible": false
      }
    },
    {
      "id": "pointOfInterest.recreation.park",
      "geometry": {
        "fillColor": "#f9b9d2"
      }
    }
  ]
}

Objek JSON

Deklarasi gaya JSON terdiri dari objek tingkat atas dan array aturan gaya.

  • Properti tingkat atas (opsional) - Setelan gaya global seperti backgroundColor dan variant.
  • styles - Array objek aturan gaya, yang dapat terdiri dari hal berikut:
    • id - Fitur peta yang akan dipilih untuk modifikasi gaya ini (misalnya, pointOfInterest.recreation.park).
    • geometry (opsional) - Elemen geometris fitur peta dan aturan gaya yang akan diterapkan (misalnya, fillColor).
    • label (opsional) - Label teks atau pin fitur peta dan aturan gaya yang akan diterapkan (misalnya, textStrokeColor).

Properti tingkat atas

Properti dalam tabel berikut berlaku untuk seluruh gaya peta.

Properti Jenis Deskripsi Contoh

backgroundColor

 String Sesuaikan warna latar belakang aplikasi peta menggunakan string hex #RRGGBB. Setelan ini tidak mendukung perubahan pada opasitas. "#002211"

variant

"light"|"dark" Tentukan mode terang atau gelap. Jika tidak ditentukan, defaultnya adalah "light". "light"

monochrome

boolean Untuk mengaktifkan monokrom, gunakan true untuk peta versi abu-abu.

true

metadata

objek Data nilai kunci arbitrer yang disertakan dalam definisi gaya. Anda dapat menggunakan kolom ini untuk menyertakan konten yang tidak terkait gaya tentang gaya. Data ini tidak dikirim ke klien peta seperti Maps JavaScript SDK.

{"author": "me", "date": "2026-04-27"}

Objek aturan gaya

Bagian ini menjelaskan properti yang menentukan objek aturan gaya dalam array styles untuk menyesuaikan fitur peta. Setiap objek aturan gaya harus terdiri dari hal berikut:

  • Properti id.
  • Elemen geometry atau label dengan properti styler terkait yang ditentukan.

id (fitur peta)

Properti id menentukan fitur peta yang akan ditata gayanya. Nama properti adalah versi camelcase dari nama fitur peta di editor gaya.

Fitur peta membentuk hierarki kategori. Jika Anda menentukan jenis fitur induk, seperti pointOfInterest, gaya yang Anda tentukan untuk induk akan diterapkan ke semua turunannya, seperti pointOfInterest.retail dan pointOfInterest.lodging. Untuk mengetahui detailnya, lihat Hierarki fitur peta.

Daftar properti id yang tersedia

Properti id yang tersedia adalah sebagai berikut:

  • pointOfInterest
  • pointOfInterest.emergency
  • pointOfInterest.emergency.fire
  • pointOfInterest.emergency.hospital
  • pointOfInterest.emergency.pharmacy
  • pointOfInterest.emergency.police
  • pointOfInterest.entertainment
  • pointOfInterest.entertainment.arts
  • pointOfInterest.entertainment.casino
  • pointOfInterest.entertainment.cinema
  • pointOfInterest.entertainment.historic
  • pointOfInterest.entertainment.museum
  • pointOfInterest.entertainment.themePark
  • pointOfInterest.entertainment.touristAttraction
  • pointOfInterest.foodAndDrink
  • pointOfInterest.foodAndDrink.bar
  • pointOfInterest.foodAndDrink.cafe
  • pointOfInterest.foodAndDrink.restaurant
  • pointOfInterest.foodAndDrink.winery
  • pointOfInterest.landmark
  • pointOfInterest.lodging
  • pointOfInterest.recreation
  • pointOfInterest.recreation.beach
  • pointOfInterest.recreation.boating
  • pointOfInterest.recreation.fishing
  • pointOfInterest.recreation.golfCourse
  • pointOfInterest.recreation.hotSpring
  • pointOfInterest.recreation.natureReserve
  • pointOfInterest.recreation.park
  • pointOfInterest.recreation.peak
  • pointOfInterest.recreation.sportsComplex
  • pointOfInterest.recreation.sportsField
  • pointOfInterest.recreation.trailhead
  • pointOfInterest.recreation.zoo
  • pointOfInterest.retail
  • pointOfInterest.retail.grocery
  • pointOfInterest.retail.shopping
  • pointOfInterest.service
  • pointOfInterest.service.atm
  • pointOfInterest.service.bank
  • pointOfInterest.service.carRental
  • pointOfInterest.service.evCharging
  • pointOfInterest.service.gasStation
  • pointOfInterest.service.parkingLot
  • pointOfInterest.service.postOffice
  • pointOfInterest.service.restStop
  • pointOfInterest.service.restroom
  • pointOfInterest.transit
  • pointOfInterest.transit.airport
  • pointOfInterest.other
  • pointOfInterest.other.bridge
  • pointOfInterest.other.cemetery
  • pointOfInterest.other.government
  • pointOfInterest.other.library
  • pointOfInterest.other.military
  • pointOfInterest.other.placeOfWorship
  • pointOfInterest.other.school
  • pointOfInterest.other.townSquare
  • political
  • political.countryOrRegion
  • political.border
  • political.reservation
  • political.stateOrProvince
  • political.city
  • political.sublocality
  • political.neighborhood
  • political.landParcel
  • infrastructure
  • infrastructure.building
  • infrastructure.building.commercial
  • infrastructure.businessCorridor
  • infrastructure.roadNetwork
  • infrastructure.roadNetwork.noTraffic
  • infrastructure.roadNetwork.noTraffic.pedestrianMall
  • infrastructure.roadNetwork.noTraffic.trail
  • infrastructure.roadNetwork.noTraffic.trail.paved
  • infrastructure.roadNetwork.noTraffic.trail.unpaved
  • infrastructure.roadNetwork.parkingAisle
  • infrastructure.roadNetwork.ramp
  • infrastructure.roadNetwork.road
  • infrastructure.roadNetwork.road.arterial
  • infrastructure.roadNetwork.road.highway
  • infrastructure.roadNetwork.road.local
  • infrastructure.roadNetwork.road.noOutlet
  • infrastructure.roadNetwork.roadShield
  • infrastructure.roadNetwork.roadSign
  • infrastructure.roadNetwork.roadDetail
  • infrastructure.roadNetwork.roadDetail.surface
  • infrastructure.roadNetwork.roadDetail.crosswalk
  • infrastructure.roadNetwork.roadDetail.sidewalk
  • infrastructure.roadNetwork.roadDetail.intersection
  • infrastructure.railwayTrack
  • infrastructure.railwayTrack.commercial
  • infrastructure.railwayTrack.commuter
  • infrastructure.transitStation
  • infrastructure.transitStation.bicycleShare
  • infrastructure.transitStation.busStation
  • infrastructure.transitStation.ferryTerminal
  • infrastructure.transitStation.funicularStation
  • infrastructure.transitStation.gondolaStation
  • infrastructure.transitStation.monorail
  • infrastructure.transitStation.railStation
  • infrastructure.transitStation.railStation.subwayStation
  • infrastructure.transitStation.railStation.tramStation
  • infrastructure.urbanArea
  • natural
  • natural.continent
  • natural.archipelago
  • natural.island
  • natural.land
  • natural.land.landCover
  • natural.land.landCover.crops
  • natural.land.landCover.dryCrops
  • natural.land.landCover.forest
  • natural.land.landCover.ice
  • natural.land.landCover.sand
  • natural.land.landCover.shrub
  • natural.land.landCover.tundra
  • natural.water
  • natural.water.ocean
  • natural.water.lake
  • natural.water.river
  • natural.water.other
  • natural.base

Elemen

Elemen adalah subdivisi fitur peta. Misalnya, jalan terdiri dari garis grafik (geometry) pada peta, juga teks yang menunjukkan namanya (label).

Elemen berikut tersedia, namun perhatikan bahwa fitur peta tertentu mungkin tidak mendukung, mendukung sebagian, atau mendukung semua, elemen:

  • geometry: Memilih semua elemen geometris (misalnya, poligon, polyline) dari fitur peta yang ditentukan.
  • label: Memilih semua elemen label (misalnya, teks, pin) dari fitur peta yang ditentukan.

Styler

Styler adalah cara Anda menentukan aturan gaya untuk setiap elemen fitur peta.

Misalnya, untuk footprint bangunan, Anda dapat menata gaya setiap elemen sebagai berikut:

Contoh styler geometry untuk bangunan Contoh styler label untuk bangunan
Apakah akan menyembunyikan atau menampilkan poligon footprint bangunan di peta. Apakah akan menyembunyikan atau menampilkan label bangunan.
Warna dan opasitas pengisi poligon. Warna dan opasitas pengisi teks.
Warna, opasitas, dan lebar batas. Warna dan opasitas goresan teks.

Bagian ini menjelaskan berbagai opsi gaya yang tersedia untuk elemen geometry dan label.

Styler geometry

Tabel berikut mencantumkan semua styler geometris yang tersedia.

Styler Jenis Deskripsi

visible

boolean Untuk menyembunyikan poligon atau polyline fitur peta, tetapkan ke false.

fillColor

string Sesuaikan warna poligon atau polyline dengan string hex RGB.

fillOpacity

float Sesuaikan opasitas poligon atau polyline, dengan 0 transparan dan 1 buram.

strokeColor

string Sesuaikan warna garis luar dengan string hex RGB.

strokeOpacity

float Sesuaikan opasitas garis luar, dengan 0 transparan dan 1 buram.

strokeWeight

float Sesuaikan ketebalan garis luar dari rentang 0 hingga 8.

Untuk mengetahui informasi selengkapnya, lihat Poligon dan Polyline.

Styler label

Tabel berikut mencantumkan semua styler label yang tersedia.

Styler Jenis Deskripsi

visible

boolean Untuk menyembunyikan label fitur peta, tetapkan ke false.

textFillColor

string Sesuaikan warna label teks dengan string hex RGB.

textFillOpacity

float Sesuaikan opasitas label teks, dengan 0 transparan dan 1 buram.

textStrokeColor

string Sesuaikan warna garis luar dengan string hex RGB.

textStrokeOpacity

float Sesuaikan opasitas garis luar, dengan 0 transparan dan 1 buram.

textStrokeWeight

float Sesuaikan ketebalan garis luar dari rentang 0 hingga 8.

pinFillColor

string Sesuaikan warna pin dengan string hex RGB.

pinGlyphColor

string Sesuaikan warna glyph (ikon) dalam pin dengan string hex RGB.

pinOutlineColor

string Sesuaikan warna garis luar pin dengan string hex RGB.

Untuk mengetahui informasi selengkapnya, lihat Ikon dan label teks.

Keyzoom

Anda dapat menetapkan satu gaya untuk fitur untuk semua tingkat keyzoom atau menentukan gaya yang berbeda untuk tingkat keyzoom yang berbeda. Jika Anda hanya memberikan satu gaya, gaya tersebut akan digunakan untuk semua tingkat keyzoom mulai dari z0. Jika Anda memberikan gaya untuk tingkat keyzoom yang berbeda, gaya tersebut akan berlaku dari tingkat zoom tersebut hingga tingkat zoom berikutnya yang telah Anda tentukan.

Untuk menetapkan tingkat keyzoom untuk gaya, di properti styler, tentukan tingkat keyzoom dari z0 hingga z22, lalu penyesuaian styler.

Dalam contoh berikut, warna air adalah hitam dari tingkat keyzoom 0-5, abu-abu gelap dari tingkat keyzoom 6-11, dan abu-abu muda mulai dari tingkat keyzoom 12.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

Untuk mengetahui informasi selengkapnya, lihat bagian Mengatur gaya tingkat zoom.

Batasan

Anda dapat menggunakan JSON untuk menata gaya hampir semua hal di konsol Google Cloud, kecuali opsi berikut dari menu Setelan Peta:

Opsi tingkat peta ini memerlukan pengambilan ulang data petak agar dapat dirender dengan benar, yang mungkin tidak diinginkan untuk kasus penggunaan tertentu.

Untuk opsi ini, Anda harus memilih preferensi di Setelan Peta menu.

Karena opsi ini tidak disertakan dalam gaya yang diekspor, opsi ini harus dipilih ulang di konsol Google Cloud saat mengimpor gaya.