如何建立地圖 ID

選取平台: Android iOS JavaScript Web 服務

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

如需進一步瞭解使用地圖 ID 的功能,請參閱「地圖 ID 總覽」一文。

所需權限

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

建立地圖 ID

請按照下列步驟在 Cloud 控制台中建立地圖 ID:

  1. 登入 Cloud 控制台專案,並取得必要權限

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

  3. 按一下「建立地圖 ID」

    建立新地圖 ID

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

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

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

如果您使用雲端式地圖樣式設定,請將地圖樣式與地圖 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 後建立並新增數位簽章。產生新的網址簽署密鑰時,請務必從網址中移除先前的數位簽章。