雲端式地圖樣式設定總覽
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
不必更新應用程式的程式碼,就能自訂及更新使用者的道路地圖體驗。透過 Google Cloud 控制台中的 Google 地圖平台雲端式地圖樣式設定,您可以選取預設 roadmap
地圖類型的顏色,並設定是否顯示地圖項目,然後將這些設定套用至所有 JavaScript、iOS 和 Android 應用程式。
Google 地圖提供衛星、地形和道路地圖等不同檢視畫面,但雲端式地圖樣式只會影響預設的 roadmap
地圖類型。
如要瞭解其他地圖自訂方式,請參閱「自訂地圖」一文。
使用雲端式地圖樣式設定的優點
使用雲端式地圖樣式設定,不僅能製作更有吸引力、資訊更豐富的地圖,更新時也不必變更程式碼:
- 更多地圖項目:可使用四大類將近 100 個不同的地圖項目進行自訂。搜尋點包括「娛樂」、「休閒」和「服務」等地圖項目,每項之下還有數個子地圖項目。舉例來說,「服務」底下有「提款機」、「銀行」、「加油站」和「洗手間」等項目。如需完整清單,請參閱「可設定樣式的地圖項目」一文。
- 更多地圖自訂設定:雲端式地圖樣式設定更加簡單直觀,方便您設定地圖樣式。Google 最近更新了一些功能,讓您可以進一步掌控基本地圖的外觀與風格,設定地圖項目先前所無法使用的標籤和幾何圖形。舉例來說,您可以自訂觀光景點、餐廳、休閒區、緊急救援服務和零售業等地圖項目套用的標籤。
- 地圖經首次使用即可更快速載入:由於地圖初次啟動時,已下載並快取過地圖樣式,您之後如果再度瀏覽和平移/縮放地圖,載入速度就會比較快。
- 地圖樣式編輯器介面更臻完美:地圖設定可用來定義地圖樣式屬性,例如建築物和地標樣式,以及搜尋點密度等級。可設定樣式的元素會集中顯示於同一個面板,這樣您在自訂樣式時,整個地圖區域就會更明顯。此外,類別可展開或收合,使用上更加直觀,有助您找到地圖項目。您還可使用篩選器方塊,依需要的地圖項目限定清單範圍。
雲端式地圖樣式設定提供的功能
使用雲端式地圖樣式設定時,可執行的操作如下:
- 使用無程式碼樣式編輯器:設計人員不必編寫程式碼,就能按照自己的目標和品牌宣傳需求,建立及預覽樣式。
- 不必修改程式碼就能變更樣式:設定好地圖 ID 後,不必對程式碼進行任何變更,就能草擬及測試地圖樣式的修改內容。
- 設定更多地圖項目樣式:變更更多地圖項目的顯示設定和顏色,例如道路、建築物、水域、搜尋點和大眾運輸路線。
雲端式地圖樣式設定的運作方式
地圖樣式的儲存和修改都是在 Cloud 控制台的 Google 地圖平台執行。應用程式會使用地圖 ID 向 Cloud 控制台要求地圖樣式,然後套用至應用程式。您可以將多個地圖 ID 與同一個地圖樣式建立關聯,這樣不同應用程式平台上顯示的地圖外觀就會保持一致。
如何使用雲端式地圖樣式設定
1 |
開始使用 |
前往「開始設定」,然後參閱教學課程。 |
2 |
建立雲端式地圖樣式 |
請參閱「建立並使用地圖樣式」一文。 |
3 |
將地圖樣式與地圖 ID 建立關聯 |
根據應用程式類型建立或開啟相應的地圖 ID,並為這個 ID 指派地圖樣式。您可以為其他平台的應用程式建立更多地圖 ID,並指定同樣的地圖樣式給這些 ID。詳情請參閱「連結或移除樣式中的地圖 ID」一文。 |
4 |
在應用程式中加入地圖 ID |
這樣地圖就會使用與 ID 相關聯的地圖樣式。詳情請參閱「在地圖中加入地圖 ID」一文。 |
5 |
線上調整地圖樣式 |
每當需要變更地圖樣式,都可以在雲端樣式設定中進行。詳情請參閱「更新地圖樣式」一文。 |
6 |
發布修改後的地圖樣式 |
準備好要更新的地圖樣式後,請點選發布,新的地圖樣式就會在應用程式中顯示。詳情請參閱「發布地圖樣式」一文。 |
後續步驟
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-08-12 (世界標準時間)。
[null,null,["上次更新時間:2025-08-12 (世界標準時間)。"],[[["\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)."]]