Maps Embed API 快速入門導覽課程

您可以透過簡單的 HTTP 要求在網頁上放置互動式地圖或街景服務全景,不需要使用 JavaScript。

費用

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

事前準備

如要在網頁上建立嵌入地圖,請點選以下分頁標籤,完成必要的設定步驟:

步驟 1

控制台

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

    前往專案選取器頁面

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

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

Cloud SDK

gcloud projects create "PROJECT"

進一步瞭解 Google Cloud SDKCloud SDK 安裝和下列指令:

步驟 2

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

控制台

啟用 Maps Embed API

Cloud SDK

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

進一步瞭解 Google Cloud SDKCloud SDK 安裝和下列指令:

步驟 3

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

API 金鑰是一組專屬 ID,用於驗證與您專案有關的使用權限及帳單處理要求。您的專案至少要有一個相關聯的 API 金鑰。

建立 API 金鑰的方法如下:

控制台

  1. 前往「Google Maps Platform」(Google 地圖平台) >「Credentials」(憑證) 頁面。

    前往「Credentials」(憑證) 頁面

  2. 在「Credentials」(憑證) 頁面上,點選「Create credentials」(建立憑證) >「API key」(API 金鑰)
    「API key created」(建立的 API 金鑰) 對話方塊會顯示您新建立的 API 金鑰。
  3. 按一下「Close」(關閉)。
    新建立的 API 金鑰會出現在「Credentials」(憑證) 頁面的「API keys」(API 金鑰) 下方。
    (別忘了先為 API 金鑰設定限制,然後才在正式環境中使用)

Cloud SDK

gcloud alpha services api-keys create \
    --project "PROJECT" \
    --display-name "DISPLAY_NAME"

進一步瞭解 Google Cloud SDKCloud SDK 安裝和下列指令:

產生 iframe

點擊下列選項,新增位置和 API 金鑰以產生網頁的 iframe。如需其他參數和選項,請參閱「嵌入地圖」。

測試 iframe

如何在 HTML 瀏覽器視窗中查看 iframe:

  1. 開啟預設文字編輯器。根據預設,您應該在裝置上安裝 TextEditMicrosoft 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」(關閉) 來刪除專案。

後續步驟