Sesuaikan dan perbarui pengalaman peta jalan untuk pengguna tanpa harus memperbarui kode aplikasi Anda. Dengan gaya visual peta berbasis cloud Google Maps Platform di Konsol Google Cloud, Anda dapat memilih warna dan menetapkan visibilitas untuk fitur pada jenis peta roadmap default dan menerapkannya ke semua aplikasi JavaScript, iOS, dan Android Anda.
Meskipun Google Maps menyediakan tampilan yang berbeda, seperti peta satelit, medan, dan jalan, gaya visual peta berbasis cloud hanya memengaruhi jenis peta roadmap default.
Untuk mengetahui informasi tentang cara lain untuk menyesuaikan peta, lihat Menyesuaikan Peta.
Alasan menggunakan gaya visual peta berbasis Cloud
Dengan gaya visual peta berbasis Cloud, Anda dapat membuat peta yang lebih menarik dan informatif serta memperbaruinya tanpa perubahan kode:
Lebih banyak fitur peta: Sesuaikan hampir 100 fitur peta individual, dalam empat kategori. Lokasi menarik mencakup fitur seperti Hiburan, Rekreasi, dan Layanan, yang masing-masing juga memiliki beberapa fitur turunan. Misalnya,
Layanan mencakup ATM, Bank, SPBU, dan Toilet. Untuk mengetahui daftar lengkapnya, lihat artikel Penataan gaya yang dapat Anda lakukan di peta.
Lebih banyak cara untuk menyesuaikan peta: Dengan gaya visual peta berbasis Cloud, gaya peta dapat ditata dengan lebih mudah dan intuitif. Pembaruan terbaru memberi Anda kontrol yang lebih terperinci atas tampilan dan nuansa peta dasar dengan label dan geometri yang sebelumnya tidak tersedia untuk fitur peta. Misalnya, Anda dapat menyesuaikan label yang diterapkan ke objek wisata, restoran, area rekreasi, layanan darurat, retail, dan sebagainya.
Pemuatan peta lebih cepat setelah penggunaan pertama: Setelah peta dimulai saat gaya peta didownload dan di-cache, tampilan dan gerakan geser/zoom peta selanjutnya akan lebih cepat.
Antarmuka editor gaya peta yang lebih baik: Setelan peta memungkinkan Anda menentukan properti gaya peta, seperti gaya Bangunan dan tempat terkenal serta tingkat kepadatan POI. Elemen yang dapat ditata gayanya ditampilkan semua di satu panel sehingga area peta akan lebih terlihat saat Anda melakukan penyesuaian.
Selain itu, fitur peta lebih mudah ditemukan dengan kategori yang lebih intuitif yang dapat diluaskan dan diciutkan, serta kotak filter untuk menentukan cakupan agar daftar menampilkan fitur peta yang Anda butuhkan.
Tindakan yang dapat Anda lakukan dengan gaya visual peta berbasis Cloud
Anda dapat melakukan tindakan berikut dengan gaya visual peta berbasis Cloud:
Menggunakan editor gaya tanpa kode: Perancang peta dapat membuat dan melihat pratinjau gaya
untuk menyesuaikan dengan sasaran dan branding Anda tanpa perlu menulis kode.
Mengubah gaya tanpa perubahan kode: Buat draf dan uji perubahan gaya peta tanpa melakukan perubahan apa pun pada kode setelah ID peta diterapkan.
Menata gaya menggunakan lebih banyak fitur peta: Ubah visibilitas dan warna untuk lebih banyak fitur peta, seperti jalan, bangunan, perairan, lokasi menarik, dan rute transportasi umum.
Cara kerja gaya visual peta berbasis cloud
Gaya peta disimpan dan diedit di Konsol Cloud Google Maps Platform. Aplikasi Anda menggunakan ID peta untuk meminta gaya peta dari Konsol Cloud, lalu menerapkannya ke aplikasi Anda. Anda dapat mengaitkan beberapa ID peta dengan gaya peta yang sama, sehingga peta Anda dapat terlihat sama di berbagai platform aplikasi.
Buat atau buka ID peta untuk jenis aplikasi Anda, dan tetapkan gaya peta ke ID peta tersebut.
Anda dapat membuat ID peta tambahan untuk aplikasi di platform lainnya dan menetapkan gaya peta yang sama ke ID peta tambahan tersebut. Untuk mengetahui detailnya, lihat bagian Mengaitkan dan menghapus ID peta pada gaya Anda.
4
Tambahkan ID peta ke aplikasi
Peta Anda akan menggunakan gaya peta yang dikaitkan dengan ID peta tersebut. Untuk mengetahui detailnya, lihat bagian Menambahkan ID peta ke aplikasi Anda.
5
Sesuaikan gaya peta secara online
Setiap kali Anda perlu mengubah gaya peta, edit gaya tersebut di gaya visual cloud. Untuk mengetahui detailnya, lihat bagian Mengubah gaya peta.
6
Publikasikan gaya peta yang telah diubah
Jika Anda sudah siap untuk memperbarui gaya peta, publikasikan gaya peta tersebut, dan gaya peta yang baru akan muncul di aplikasi Anda. Untuk mengetahui detailnya, lihat bagian Memublikasikan gaya peta.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-08-12 UTC."],[[["\u003cp\u003eCloud-based maps styling allows you to customize the appearance of the default roadmap in your Google Maps Platform applications (Android, iOS, JavaScript, and Web Service) through the Google Cloud Console.\u003c/p\u003e\n"],["\u003cp\u003eYou can create and update map styles without needing to change your application code, making it easier to maintain a consistent brand experience across platforms.\u003c/p\u003e\n"],["\u003cp\u003eCloud-based maps styling offers a vast range of customization options for nearly 100 map features, providing granular control over colors, visibility, and labels for elements like roads, buildings, points of interest, and more.\u003c/p\u003e\n"],["\u003cp\u003eMap styles are associated with map IDs, enabling you to apply the same style across different applications and platforms by using the corresponding map ID.\u003c/p\u003e\n"],["\u003cp\u003eOnce a map style is downloaded and cached, subsequent map loads and interactions are faster, providing a smoother user experience.\u003c/p\u003e\n"]]],["Cloud-based map styling in Google Maps Platform allows customization of the default `roadmap` view for Android, iOS, and JavaScript applications. Key actions include creating map styles via a no-code editor, associating them with map IDs, and implementing these IDs into applications. This enables style changes without code updates. Users can customize nearly 100 features, including points of interest, labels, and geometries. The process involves getting started, creating styles, linking them to map IDs, and adding the ID to apps. Subsequent map views are quicker after the first load.\n"],null,["Select platform: [Android](/maps/documentation/android-sdk/cloud-customization \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/cloud-customization \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/cloud-customization \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/maps-static/cloud-customization \"View this page for the Web Service platform docs.\")\n\n\u003cbr /\u003e\n\n| **Paid feature:**\n| Features accessed by adding a [map ID](/maps/documentation/get-map-id) triggers a map\n| load charged against the Dynamic Maps SKU for Android and iOS. See\n| [Google Maps Billing](/maps/billing-and-pricing/sku-details#dynamic-maps-ess-sku) for more information.\n\nCustomize and update the road map experience for your users without\nhaving to update your apps' code. With the Google Maps Platform cloud-based maps styling in the Google Cloud Console, you can select colors and set visibility for features on the default `roadmap` map type and apply it to all of your JavaScript, iOS, and Android applications.\n\nWhile Google Maps provides different views, such as satellite, terrain, and road map, cloud-based maps styling affects only the default `roadmap` map type.\n\nFor information on other ways to customize your map, see [Customize Maps](../map-ids/customize-maps-overview.md).\n\nWhy use cloud-based maps styling\n\nWith cloud-based maps styling, you can create more engaging and informative maps\nand update them without code changes:\n\n- **More map features** : Customize almost 100 individual map features, in four categories. Points of interest includes features such as Entertainment, Recreation, and Services, which each also have several child features. For example, Services includes ATM, Bank, Gas station, and Restroom. For the full list, see [What you can style on a map](/maps/documentation/javascript/cloud-customization/taxonomy).\n- **More ways to customize maps**: Cloud-based maps styling makes it easier and more intuitive for you to style your map. Recent updates give you more granular control over the look and feel of the basemap with labels and geometries not previously available for map features. For example, you can customize labels applied to tourist attractions, restaurants, recreational areas, emergency services, retail, and more.\n- **Maps load quickly after the first use**: After the initial startup time as a map style is downloaded and cached, subsequent views and pan/zoom movement of the map are faster.\n- **Improved map style editor interface**: Map settings let you define map style properties, such as Building and landmark styles and POI density levels. Styleable elements are all shown on a single panel, giving you more visible map area when making customizations. It is also easier to find your map feature with more intuitive categories that expand and collapse, plus a filter box to scope the list to the map feature you need.\n\nWhat can you do with cloud-based maps styling\n\nYou can do the following with cloud-based maps styling:\n\n- **Use a no-code style editor**: A designer can create and preview a style to match your goals and branding without needing to code.\n- **Change styles without code changes**: Draft and test map style changes without any changes to your code once the map ID is in place.\n- **Style more map features**: Change the visibility and color of more map features, such as roads, buildings, bodies of water, points of interest, and transit routes.\n\nHow cloud-based maps styling works\n\nMap styles are stored and edited in the Google Maps Platform Cloud Console. Your\napplication uses a map ID to request a map style from the cloud console, and then\napplies it to your application. You can have several map IDs associated with the same map style,\nso your maps can look the same across your application platforms. \n\nHow to use cloud-based maps styling\n\n|---|--------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| 1 | **Get started** | Head over to [Get started and set up](/maps/documentation/javascript/cloud-customization/setup), and then check out the [Tutorial](/maps/documentation/javascript/cloud-customization/tut). |\n| 2 | **Create a cloud-based map style** | See [Create and use map styles](/maps/documentation/javascript/cloud-customization/map-styles). |\n| 3 | **Associate your map style with a map ID** | Create or open a map ID for your application type, and assign a map style to it. You can create additional map IDs for applications on other platforms and assign the same map style to them. For details, see [Associate or remove map IDs on your style](/maps/documentation/javascript/cloud-customization/map-styles#associate-style-with-map-id). |\n| 4 | **Add the map ID to your application** | Your maps then use the map style associated with that map ID. For details, see [Add the map ID to your map](/maps/documentation/get-map-id#add-a-map-id-to-your-app). |\n| 5 | **Adjust your map style online** | Whenever you need to change your map style, edit it in cloud styling. For details, see [Update a map style](/maps/documentation/javascript/cloud-customization/map-styles#update-style). |\n| 6 | **Publish your changed map style** | When you're ready to update a map style, publish it, and your new map style shows up in your application. For details, see [Publish a map style](/maps/documentation/javascript/cloud-customization/map-styles#publish-style). |\n\nWhat's next\n\n- Try out the [Tutorial](/maps/documentation/javascript/cloud-customization/tut).\n- Check out cloud styling application requirements. See [Application requirements](/maps/documentation/javascript/cloud-customization/setup#reqs)."]]
