雲端式地圖樣式設定

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

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

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

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

這些功能包括:

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

雖然雲端式地圖樣式設定適用於 Maps SDK for Android1Maps SDK for iOSJavaScriptMaps Static API,但部分功能不會在所有平台上顯示。

事前準備

帳單

使用雲端式地圖樣式設定功能需要有地圖 ID。在 Maps SDK for Android、Maps SDK for iOS 和 JavaScript 中使用地圖 ID 時,系統會根據動態地圖 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;

JavaScript

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

window.initMap = initMap;
查看範例

查看範例


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