Buka Konsol Google Cloud, lalu pilih Map Styles. Pilih atau buat project, jika perlu.
Pilih Create Style.
Di bagian bawah dialog, pilih Sesuaikan.
Menata gaya Jaringan jalan
Di bagian Map Features, luaskan Infrastructure, lalu pilih Road network.
Pada panel yang muncul di sebelah kanan, di bagian Polyline, lalu Fill color, pilih kotak warna.
Pilih warna cerah. Jika warna diubah, kotak Fill color akan otomatis dicentang.
Di bagian Stroke width, tetapkan lebar goresan ke 5 px.
Di peta, perbesar dan perkecil untuk melihat efek perubahan Anda. Karena Anda telah memilih fitur peta yang relatif tinggi dalam hierarki, semua jenis jalan di bawahnya akan mewarisi perubahan yang Anda buat.
Menyimpan dan memublikasikan gaya peta
Di kanan atas, pilih Save.
Di bagian Save and publish map style, masukkan nama, dan jika perlu deskripsi untuk gaya peta Anda.
Pilih Save. Gaya peta Anda disimpan dan dipublikasikan.
Langkah 2: Membuat dan menghubungkan ID peta
ID peta memungkinkan Anda menggunakan gaya peta di aplikasi dan situs. Jika Anda melakukan perubahan pada gaya peta yang terkait dengan ID peta, perubahan gaya tersebut akan diterapkan saat Anda memublikasikannya, sehingga software atau aplikasi tidak perlu diupdate.
Membuat ID peta
Di Konsol Google Cloud, pilih Map Management.
Di bagian atas, pilih Buat ID peta.
Tambahkan nama untuk ID peta Anda, dan jika perlu deskripsi.
Pilih jenis peta untuk ID peta, bergantung pada platform yang Anda pilih untuk menggunakan gaya peta.
Di bagian bawah halaman, pilih Save. ID peta Anda dibuat.
Menghubungkan ID peta ke gaya peta
Di bagian Gaya peta, pilih Ubah gaya di samping Terang.
Di bagian Ubah gaya terang, pilih gaya peta yang akan digunakan untuk mode terang di aplikasi Anda, lalu pilih Selesai.
Ulangi dengan memilih Ubah Gaya di samping Gelap, lalu pilih gaya peta mode gelap.
Pilih Simpan. ID peta Anda kini dikaitkan dengan gaya peta Anda.
Langkah 3: Menambahkan ID peta ke aplikasi atau situs
Setelah Anda memiliki ID peta yang dikaitkan dengan gaya peta yang dipublikasikan, Anda dapat menambahkannya ke aplikasi atau situs Anda dan mengujinya untuk memastikan gaya tersebut berfungsi sebagaimana mestinya.
Berikut beberapa hal yang dapat Anda coba selanjutnya:
Mengubah gaya. Buat perubahan pada gaya peta Anda lalu publikasikan, dan lihat perubahan tersebut otomatis ditampilkan di aplikasi dan situs Anda. Jika Anda ingin menguji perubahan sebelum dipublikasikan, lihat Menguji pembaruan gaya peta.
Menggunakan hierarki fitur peta untuk mendapatkan gaya yang Anda inginkan secara efisien. Misalnya, Anda dapat menata gaya fitur peta tingkat tinggi Natural>Land, dan semua fitur peta daratan di bawahnya akan mewarisi gaya visual tersebut. Anda kemudian dapat melakukan penataan gaya visual kustom, khusus pada fitur peta turunan yang Anda inginkan untuk tampil berbeda.
[[["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-25 UTC."],[],[],null,["# Tutorial - Highlight a road network\n\nSelect platform: [Android](/maps/documentation/android-sdk/cloud-customization/tut \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/cloud-customization/tut \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/cloud-customization/tut \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/maps-static/cloud-customization/tut \"View this page for the Web Service platform docs.\")\n\n\u003cbr /\u003e\n\nThis tutorial walks you through the steps to create and use a map style that\nhighlights the road network:\n\n1. **[Create and publish a map style](#tut1)** so it's available to use.\n\n2. **[Create and connect a map ID](#tut2)** that lets you use your style in\n apps and websites.\n\n3. **[Add the map ID to your apps and websites](#tut3)** so your apps use\n your map style.\n\nStep 1: Create and publish a map style\n--------------------------------------\n\n### Open cloud-based maps styling\n\n1. Go to the Google Cloud console, and select [**Map Styles**](https://console.cloud.google.com/project/_/google/maps-apis/studio/styles). Select or create a project, if needed.\n\n2. Select **Create Style**.\n\n3. At the bottom of the dialog, select **Customize**.\n\n### Style the Road network\n\n1. Under **Map Features** , expand **Infrastructure** , then select **Road\n network**.\n\n2. On the panel that pops up on the right, under **Polyline** ,\n then **Fill color**, select the color box.\n\n3. Choose a bright color. Changing the color automatically checks\n the **Fill color** box.\n\n | **Note:** A solid dot appears next to the map feature to indicate it has a custom style.\n4. Under **Stroke width**, set the stroke width to 5px.\n\n5. On the map, zoom in and out to see the effect of your changes. Because\n you selected a map feature that is relatively high in the hierarchy,\n all road types underneath it have inherited your changes.\n\n### Save and publish your map style\n\n1. At the top right, select **Save**.\n\n2. In **Save and publish map style**, enter a name and, optionally, a\n description for your map style.\n\n3. Select **Save**. Your map style is saved and published.\n\n| **Note:** The first time you save a map style, it is published automatically since it's the first version. When you subsequently update a map style, you can save changes as drafts as you go, and then publish when you're finished and want the style updated.\n\nStep 2: Create and connect a map ID\n-----------------------------------\n\nA map ID lets you use your map style on apps and websites. If you make changes\nto the map style associated with a map ID, your style changes\ngo live when you publish, so no software or app updates are needed.\n\n### Create a map ID\n\n1. In the Google Cloud console, select **Map Management**.\n\n2. At the top, select **Create map ID**.\n\n3. Add a name for your map ID, and optionally, a description.\n\n4. Select the map type for the map ID, depending on where you want to use your\n map style.\n\n | **Note:** If you want to use your map style for different types of applications or websites, create a new map ID for each type, and then connect them all to the same map style.\n5. At the bottom of the page, select **Save**. Your map ID is created.\n\n### Connect the map ID to your map style\n\n1. Under **Map style** , select **Change style** next to **Light**.\n\n2. Under **Change light style** , choose what map style to\n use for light mode in your apps, and select **Done**.\n\n3. Repeat by selecting **Change Style** next to **Dark** and select a dark\n mode map style.\n\n | **Note:** If you don't select a dark style, or have not created any dark mode map styles, you can select the Google default dark map style.\n4. Select **Save**. Your map ID is now associated with your map styles.\n\nStep 3: Add the map ID to your apps or websites\n-----------------------------------------------\n\nNow that you have a map ID that is associated with a published map style,\nyou can add it to your apps or websites and test to make sure it functions\nas expected.\n\nFor more information about adding a map ID, see\n[Add the map ID to your map](/maps/documentation/get-map-id#add-a-map-id-to-your-app).\n\nWhat's next\n-----------\n\nHere are some things you can try next:\n\n- **Update a style** . Make changes to your map style and publish it,\n and see the changes show up automatically in your apps and websites. If you\n want to test your changes before they go live, see\n [Test map style updates](/maps/documentation/javascript/cloud-customization/test-style-updates).\n\n- **Use the map feature hierarchy to efficiently get the styles you want** .\n For example, you can style the high-level map feature **Natural\\\u003eLand**,\n and all of the land map features under it inherit the styling. You can\n then do custom styling on just the child map features that you want to\n be different."]]
