本頁面由 Cloud Translation API 翻譯而成。

雲端式地圖樣式設定

Google 地圖平台提供雲端式地圖樣式設定功能，以便您使用 Google Cloud 控制台輕鬆設定地圖樣式，以及自訂和管理地圖。如此一來，您不必在每次變更樣式時更新應用程式的程式碼，即可為使用者打造自訂的地圖體驗。

在 2020 年 9 月 15 日前建立的樣式不會顯示 Google 地圖的進階自然地貌。您必須建立地圖樣式，才能使用支援地圖樣式設定功能的 Google 地圖進階自然地貌。

您可以透過雲端式地圖樣式設定，為使用 Google 地圖的任何應用程式建立及編輯地圖樣式，無須更改程式碼中的地圖 ID。所有樣式變更都可以在 Cloud 控制台中進行，不必具備任何程式設計技能，例如變更道路、建築物、水域、搜尋點和大眾運輸路線等多種地圖元素的外觀和顏色。

這些功能包括：

雲端式地圖樣式設定：您不必使用 JSON 程式碼設定地圖樣式，在 Cloud 控制台中即可使用地圖 ID 和地圖樣式，來管理動態或靜態地圖及設定相關樣式。
向量地圖：JavaScript 開發人員可以選擇直接在自己的網頁應用程式中，使用 maps.google.com 上提供的同一個 WebGL 加速向量地圖。
篩選商家搜尋點：您可以視需要從地圖顯示內容中移除五種類別的商家搜尋點。
控制搜尋點密度：您可以調整基本地圖上顯示的搜尋點密度，預設顯示較多或較少搜尋點。

雖然雲端式地圖樣式設定適用於 Maps SDK for Android¹、Maps SDK for iOS、JavaScript 和 Maps Static API，但部分功能不會在所有平台上顯示。

事前準備

建立地圖 ID
如要使用雲端式地圖樣式設定，您必須使用地圖 ID 載入地圖。
從硬式編碼樣式遷移
在新增地圖 ID 以在以硬式編碼樣式 (例如 JSON 或網址查詢參數) 自訂的現有地圖上使用雲端式地圖樣式設定之前，建議您先移除硬式編碼樣式，以避免日後的地圖項目發生衝突。您可以將 JSON 樣式匯入至新地圖樣式中。
- 在 Android 上，更新 MapStyleOptions
- 在 iOS 上，更新 GMSMapStyle 類別
- 在 JavaScript 上，移除 MapTypeStyle 樣式
- 在 Maps Static 上，移除 style 參數

* 升級 Maps SDK for Android
如要使用雲端式地圖樣式設定，您必須使用 18.0.0 以上版本的 Maps SDK for Android，並使用最新版的 Maps SDK for Android 轉譯器。

帳單

使用雲端式地圖樣式設定功能需要有地圖 ID。在 Maps SDK for Android、Maps SDK for iOS 和 JavaScript 中，使用地圖 ID 會產生動態地圖 SKU 的費用。在 Maps Static API 中使用地圖 ID 時，系統會根據 Static Maps SKU 收取費用。

範例

Android

執行 ApiDemos 範例應用程式

如要執行 ApiDemos 範例應用程式，請參閱 GitHub 範例 (Java | Kotlin)，以及查看 CloudBasedMapStylingDemoActivity 示範 (Java | Kotlin)。

您可以參考 Java 和 Kotlin 範例應用程式，瞭解如何從雲端設定 Android 地圖的樣式。

已知問題

將應用程式發布給客戶後，您就可以透過 Google Cloud 控制台，針對具有地圖 ID 的地圖來更新自訂樣式。新樣式會在幾小時內反映在您的應用程式中。

為確保新的自訂樣式能立即顯示以供測試，請清除測試裝置上的應用程式資料。如要進一步瞭解如何清除裝置上的資料，請參閱 Android 說明中心的「釋出空間」一文。

請注意，相關設定可能因手機而有所不同。如需更多資訊，請洽詢您的裝置製造商。

iOS

執行 ApiDemos 範例應用程式

如要執行 ApiDemos 範例應用程式，請參閱 GitHub 範例 GoogleMap 範例應用程式及 CloudBasedMapStylingViewController 專案 (適用於 Swift 的 GitHub 範例 | Objective-C)。

Cloud 樣式設定 CocoaPod 或 GitHub 示範

您可以嘗試使用我們的 Objective-C 範例應用程式，瞭解如何從雲端開始設定 iOS 地圖的樣式。

打造測試版試用版應用程式

在 Xcode 中，按一下編譯按鈕以建構並執行目前配置。建構作業會產生錯誤，提示您在 SDKDemoAPIKey.h 檔案中輸入 API 金鑰。

如果您還沒有 API 金鑰，請按照這些操作說明，在 Cloud Console 上設定專案並取得 API 金鑰。在 Cloud Console 上設定金鑰時，您可以指定應用程式的軟體包 ID，確保只有您的應用程式可以使用該金鑰。SDK 範例應用程式的預設軟體包 ID 為 com.example.GoogleMapsDemos。

編輯 SDKDemoAPIKey.h 檔案，然後將 API 金鑰貼到 kAPIKey 常數的定義中：

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

如果 Xcode 提示您解鎖 SDKDemoAPIKey.h 檔案進行編輯，請選擇 [解除鎖定]。

移除以下這一行：

```
#error Register for API Key and insert here.
```

建構並執行專案。

雲端式地圖樣式設定地圖示範

CloudStyling 示範說明如何利用在 Google Cloud Console 上設定的樣式設定地圖樣式。

試用版應用程式啟動後，在清單頂端的「測試版範例」部分中按一下 [地圖自訂設定] 示範。

按一下 [樣式地圖] 即可查看載入不同地圖 ID 的效果。

此外，您也可以嘗試自行新增樣式 ([樣式地圖] > [新增地圖 ID])，並透過自訂樣式地圖查看地圖更新。

JavaScript

這是使用地圖 ID 載入自訂樣式化地圖的基本範例。這種情況下，Maps JavaScript 會在載入地圖時參照地圖 ID 8e0a97af9386fef，並自動套用目前與該地圖 ID 相關聯的地圖樣式。

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;index.js

查看範例

試閱

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Maps Static API

地圖 ID 是指與特定地圖樣式或地圖項目相關聯的 ID。您可以先設定地圖樣式，並將地圖樣式與 Google Cloud 控制台中的地圖 ID 建立關聯。這樣一來，當您在程式碼中參照該地圖 ID 時，相關的地圖樣式就會顯示在應用程式中。後續的任何樣式更新也會自動顯示在應用程式中，客戶不需要進行任何更新。

如果您在使用 style 參數自訂的現有地圖中使用雲端式地圖樣式設定，請務必加以移除，以免日後發生衝突。

如要將地圖 ID 新增至使用任一網路 API 的新地圖或現有地圖，請附加 map_id 網址參數，並將其設為您的地圖 ID。此範例說明如何使用 Maps Static API 在地圖上加入地圖 ID。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

Android 精簡模式不支援雲端式地圖樣式設定。 ↩