使用地圖 ID

地圖 ID 是用來代表單一 Google 地圖例項的專屬 ID。您可以使用地圖 ID 在網站和應用程式中啟用功能,或管理/設定地圖樣式。您可以在 Google Cloud 控制台專案的「地圖管理」頁面中,為所需的每個平台 (JavaScript、Android、iOS 或靜態地圖) 建立地圖 ID。

地圖 ID 的用途

使用地圖 ID 啟用地圖項目和樣式。以下列舉一些地圖 ID 使用方式的範例。如需完整清單,請參閱「使用地圖 ID 的功能」一文:

  • 雲端式地圖樣式設定:將地圖 ID 與地圖樣式建立關聯,即可使用 Google Cloud 控制台設定地圖樣式、自訂地圖,以及管理地圖。適用於所有平台:JavaScriptAndroidiOSMaps Static API

  • 向量地圖:使用地圖 ID 使用由向量圖塊組成的地圖,這些圖塊會在載入時使用 WebGL 在用戶端繪製。適用於 JavaScript

  • 進階標記:使用地圖 ID 啟用進階標記。適用於 JavaScriptAndroidiOS

雲端式地圖樣式設定範例

如要使用雲端式地圖樣式,為網站和 Android 應用程式中的地圖設定樣式,請按照下列步驟操作:

  1. 請為您使用的每個平台建立地圖 ID。例如,建立 JavaScript 和 Android 地圖 ID。詳情請參閱「建立地圖 ID」。

  2. 在 Google Cloud 控制台中設定地圖樣式。詳情請參閱「雲端式地圖樣式設定」。

  3. 在 Google Cloud 控制台中,將兩個地圖 ID 與地圖樣式建立關聯。詳情請參閱「將地圖 ID 與樣式建立關聯」。

  4. 在網站 JavaScript 和 Android 應用程式程式碼中參照地圖 ID。詳情請參閱「在應用程式中加入地圖 ID」一文。

與地圖 ID 相關聯的地圖樣式會顯示在您的網站和 Android 應用程式中。您可以在 Cloud 控制台中更新地圖樣式,變更會自動顯示在兩個位置,客戶不必進行任何應用程式更新。

使用地圖 ID 的功能

下表列出使用地圖 ID 的 Google 地圖平台功能和 API:

功能或 API 使用地圖 ID 達成這些目標
進階標記 啟用進階標記。您不需要建立地圖 ID,而是可以使用試用版地圖 ID `DEMO_MAP_ID`。
界線資料導向樣式 將地圖 ID 與一組界線和樣式建立關聯,以便根據界線設定地圖樣式。
資料集資料導向樣式 將地圖 ID 與一組資料和樣式建立關聯,以便根據資料集設定地圖樣式。
Flutter 為 Flutter 應用程式中使用的 Google 地圖設定樣式。
Maps Embed API 指定要嵌入網頁的地圖,並設定地圖樣式。
Maps JavaScript API 為要在網頁上顯示的地圖設定樣式。
Maps SDK for Android 為要在 Android 應用程式中顯示的地圖設定樣式。1
Maps SDK for iOS 為要在 iOS 應用程式中顯示的地圖設定樣式。1
Maps Static API 指定要算繪為靜態圖片的地圖,並為其設定樣式。
行動解決方案 使用 Maps JavaScript API 和 Android 和 iOS 適用的 SDK,為行動解決方案中的地圖設定樣式1
WebGL (向量地圖) 使用 JavaScript 向量地圖 ID 啟用 WebGL 功能。

1 如果您在 Maps SDK for Android 或 Maps SDK for iOS 中使用地圖 ID,系統會根據 Dynamic Maps SKU 收取地圖載入作業費用。

如何建立及使用地圖 ID

地圖 ID 是不重複的識別碼,代表單一 Google 地圖執行個體。您可以在 Cloud Console 中建立地圖 ID,並更新與地圖 ID 相關聯的地圖樣式。

所需權限

如要在專案中建立或管理任何地圖 ID,您必須在專案的 Cloud 主控台 IAM 頁面中,使用具有適當角色層級權限 (編輯者或擁有者) 的實體。詳情請參閱 IAM 基本角色和預先定義角色參考資料

建立地圖 ID

您可隨時在 Cloud 控制台中建立地圖 ID,並更新與地圖 ID 相關聯的樣式。

如要建立地圖 ID,請按照下列步驟操作:

  1. 登入 Cloud 控制台,並開啟具有必要權限的專案。

  2. 前往 Cloud Console 中的「地圖管理」頁面。

  3. 選取「建立地圖 ID」

    建立新地圖 ID

  4. 在「Create new map ID」頁面中執行下列操作:

    1. 在「名稱」中,為地圖 ID 命名。
    2. 選用:在「說明」中說明地圖 ID 的用途。
    3. 在「地圖類型」中,選取您要使用地圖 ID 的平台。如果選擇 JavaScript,請一併選擇「光柵」 (預設) 或「向量」地圖類型。如要進一步瞭解向量地圖,請參閱「向量地圖」。
    4. 選取「儲存」,即可顯示新的地圖 ID。

將地圖 ID 與地圖樣式建立關聯

這些操作說明假設您的專案中至少有一個現有的地圖樣式。如果您沒有任何地圖樣式,請參閱「雲端式地圖樣式設定」,並選取您的平台,瞭解如何建立地圖樣式。

  1. 前往 Cloud Console 中的「地圖管理」頁面。
  2. 在表格中選取現有的地圖 ID。
  3. 在「Associated map style」(相關聯的地圖樣式) 下方,選取地圖樣式。
  4. 選取「儲存」

    地圖 ID 的詳細資料頁面,可在此處建立地圖樣式關聯

在應用程式中加入地圖 ID

Android

您可以使用 MapView 類別 (或藉由程式輔助方式使用 GoogleMapOptions 類別),透過活動版面配置檔案中的 <fragment> 元素新增地圖 ID。

舉例來說,假設您建立了名為 map_id 的地圖 ID,並以字串值形式儲存於 res/values/strings.xml 中:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

如果是透過活動版面配置檔案中的 <fragment> 元素新增的地圖,所有要設定自訂樣式的地圖片段都必須在 map:mapId 屬性中指定地圖 ID:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
        map:mapId="@string/map_id" />

您也可以使用 MapView 類別的 map:mapId 屬性指定地圖 ID:

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

如要透過程式輔助方式指定地圖 ID,請使用 GoogleMapOptions 類別將 ID 傳送至 MapFragment 例項:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

在 Android Studio 中,按照平常的操作方式建構及執行應用程式。在第一個步驟中設定的自訂樣式會套用至所有具備指定地圖 ID 的地圖。

iOS

如要使用地圖 ID 將地圖例項化,請執行下列操作:

  1. 使用 Cloud 控制台的地圖 ID 字串建立 GMSMapID
  2. 建立 GMSMapView,指定您剛才建立的地圖 ID。

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

如果您使用的是自訂地圖 ID,可以在 Cloud 控制台中設定地圖 ID,隨時套用新樣式,該樣式會在約六小時內自動顯示在您的地圖檢視畫面,供您和使用者查看。

如果您想立即查看變更,可以關閉應用程式,然後從最近使用的應用程式清單中強制結束應用程式,再重新開啟應用程式。更新後的地圖隨即會顯示。

JavaScript

如要在應用程式程式碼中建立含有地圖 ID 的地圖,請按照下列步驟操作:

  1. 如果您已使用嵌入式 JSON 程式碼自訂地圖,請從 MapOptions 物件中移除 styles 屬性;否則請略過這個步驟。

  2. 使用 mapId 屬性將地圖 ID 新增至地圖。例如:

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

靜態地圖介面集

如要在使用任一 Google 網路服務 API 的新地圖或現有地圖中新增地圖 ID,請附加 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=MAP_ID&signature=YOUR_SIGNATURE" />

以美國紐約州紐約市布魯克林大橋為中心的地圖,右下角有地圖控制項。地圖會在道路、水域和陸地上顯示自訂樣式。

如果在加入地圖 ID 之前,地圖靜態網址中已有數位簽章,您必須在加入地圖 ID 後建立並新增數位簽章。產生新的網址簽署密鑰時,請務必從網址中移除先前的數位簽章。