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 Maps Platform，請啟用打算在專案中使用的 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」(關閉) 即可刪除專案。

後續步驟