Maps Embed API 快速入門導覽課程

透過 HTTP 要求，在網頁上放置互動式地圖或街景服務全景，不需自訂 JavaScript。

費用

所有 Maps Embed API 要求都不收費，且不限用量。不過，所有要求仍須提供有效的 Google Cloud API 金鑰。詳情請參閱「用量與計費」一文。

事前準備

如要在網頁上建立嵌入地圖，請完成下列必要設定步驟：

步驟 1：設定專案

控制台

  1. 在 Google Cloud 控制台的專案選取器頁面中，按一下「建立專案」，開始建立新的 Cloud 專案。

    前往專案選取器頁面

  2. 確認 Cloud 專案已啟用計費功能。 確認專案已啟用計費功能。

    Google Cloud 提供免付費試用期。試用期將於 90 天後或帳戶費用累積達 $300 美元時 (以先發生者為準) 結束。您隨時可以取消試用。詳情請參閱「帳單帳戶抵免額」和「帳單」。

Cloud SDK

gcloud projects create "PROJECT"

進一步瞭解 Google Cloud SDK、Cloud SDK 安裝和下列指令：

步驟 2：啟用 API 或 SDK

如要使用 Google 地圖平台，請啟用打算在專案中使用的 API 或 SDK。

控制台

啟用 Maps Embed API

Cloud SDK

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

進一步瞭解 Google Cloud SDK、Cloud SDK 安裝和下列指令：

步驟 3：取得 API 金鑰

此步驟僅適用 API 金鑰建立程序。若您在正式環境中使用 API 金鑰，強烈建議您為 API 金鑰設定限制。詳情請參閱特定產品的「使用 API 金鑰」頁面。

API 金鑰是一組專屬 ID，用於驗證與您專案有關的使用權限及帳單處理要求。您的專案至少要有一個相關聯的 API 金鑰。 如要建立新金鑰，或將 API/SDK 新增至現有金鑰，請按照下列操作說明進行。

控制台

  1. 前往「Google Maps Platform」>「金鑰和憑證」頁面。

    前往「Keys & Credentials」(金鑰和憑證) 頁面

  2. 如果出現系統提示，請選取您的專案。

  3. 請執行下列任一步驟：

    • 建立新金鑰：

      1. 依序按一下 [Create credentials] (建立憑證) > [API key] (API 金鑰)。
      2. 在「建立 API 金鑰」面板中，開啟「選取 API 限制」清單。
      3. 清除這個金鑰不需要的所有 API，並確認「Maps Embed API」仍處於選取狀態。
      4. 按一下「建立」，面板會顯示新的 API 金鑰。

    • 使用現有金鑰：

      1. 按一下金鑰名稱。
      2. 在「Select API restrictions」(選取 API 限制) 清單中，選取「Maps Embed API」。
      3. 按一下 [儲存]。

    在這裡選取 API 並不會啟用該 API。確認 Maps Embed API 已在 API 程式庫頁面啟用。

  4. 如要日後查看金鑰字串，請前往「金鑰和憑證」頁面，然後按一下金鑰的「顯示金鑰」。

如果控制台與這些步驟不同，請參閱 Google Cloud 說明文件中的「建立 API 金鑰」和「新增 API 限制」。

Cloud SDK

在下列指令中，將 PROJECT_ID 替換為您的專案 ID。

  • 建立新金鑰：執行下列指令，並將 DISPLAY_NAME 替換為金鑰名稱。

    gcloud services api-keys create \
    --project="PROJECT_ID" \
    --display-name="DISPLAY_NAME" \
    --api-target=service=maps-embed-backend.googleapis.com

    進一步瞭解 Google Cloud SDK、Cloud SDK 安裝和下列指令：

  • 使用現有金鑰：執行下列指令，並將 KEY_ID 替換為金鑰 ID。--append 旗標會保留金鑰已允許的 API。如果沒有這項參數，指令會替換這些執行個體。

    gcloud services api-keys update KEY_ID \
    --project="PROJECT_ID" \
    --append \
    --api-target=service=maps-embed-backend.googleapis.com

    進一步瞭解 Google Cloud SDK、Cloud SDK 安裝和下列指令：

    金鑰 ID 不是金鑰字串或顯示名稱。如要找出這個值，請執行 gcloud services api-keys list --project="PROJECT_ID"。ID 是 name 欄位的最後一部分：projects/PROJECT_NUMBER/locations/global/keys/KEY_ID。

如要查看金鑰字串，請執行 gcloud services api-keys get-key-string KEY_ID --project="PROJECT_ID"。

生成 iframe

點選下列選項，然後新增地點和 API 金鑰，為網頁產生 iframe。如需其他參數和選項，請參閱「嵌入地圖」。

測試 iframe

如要在 HTML 瀏覽器視窗中查看 iframe，請按照下列步驟操作：

  1. 開啟預設的文字編輯器。裝置預設應已安裝文字編輯器，例如 TextEdit 或 Microsoft Windows 記事本。
  2. 建立 HTML 檔案，並命名為 index.html。

  3. 新增下列程式碼，並加入上方產生的 iframe：

    <html>
  <!-- Replace this code comment with your iframe. -->
</html>

  4. 儲存 index.html HTML 檔案。

  5. 從桌面拖曳 HTML 檔案到網路瀏覽器中載入。在大部分的作業系統上，也可以按兩下檔案載入。

恭喜！您剛才已使用 Maps Embed API 設定及建構地圖。

清除所用資源

您可以刪除 Google Cloud 專案，停止對該專案中使用的所有資源計費。

  1. 在 Google Cloud 控制台中，前往「Manage resources」(管理資源) 頁面：

    前往「Manage resources」(管理資源) 頁面

  2. 如果預定刪除的專案隸屬於某個組織，請選取並展開頁面頂端的組織清單。
  3. 在專案清單中選取要刪除的專案，然後點按「Delete」(刪除)。
  4. 在對話方塊中輸入專案 ID，然後按一下「Shut down」(關閉) 即可刪除專案。

後續步驟