雲端式地圖樣式設定

選取平台： Android iOS JavaScript 網路服務

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 參數

計費方式

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

範例

這是使用地圖 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

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