網頁嵌入 Google 地圖教學：輕鬆串接 Google Maps API、一次搞懂 API 收費

想讓網頁或 APP 擁有地圖資訊？嵌入地圖或是串接 Google Maps API 

想在網頁上以地圖顯示店家或公司位置嗎？常見且方便的方式就是直接從 Google 地圖的分享功能選擇嵌入地圖，並複製 HTML iframe 嵌入碼貼入網頁（詳情可參考 Google 地圖說明），甚至完全免費，但缺點是無法作任何客製化的設定，如自訂外觀、加入商家圖示、提供靜態、動態街景或指引路線等。

延伸閱讀：CloudMile x 信義房屋成功案例

Google Maps API 收費規則全解析

如果需要上述客製化功能，則可串接 Google Maps API，而 Google Maps API 的收費方式採即付即用（pay-as-you-goPay only for what you use），也就是用多少付多少。但只是想製作一個網頁或是一個輕量 APP 的軟體開發者別擔心，Google 地圖平台提供開發者每個月 200 美金的免費額度，每個月約可載入 28,500 次，當使用費超過 200 美金時，才會被收費。

詳細定價請參考以下表格：

你也可以參考官方的「定價與用量計算工具」或「官方文件」，隨意拖曳將出現相對應的預估費用（美金）。

如何申請 Google Map API Key?

申請取得 Google Map API 金鑰只需以下幾個步驟：

1. 首先進入 Google Cloud Platform 的控制台

2. 登入您的 Google 帳號，首次使用請先同意使用者條款

3. 點選畫面左上方的「選取專案」

4. 接著點選小視窗右上角的「新增專案」

5. 輸入專案名稱後按建立（專案需以英文命名；命名後便無法更名）

6. 建立完成後點選左上角通知視窗中的「選取專案」，選取稍早建立的專案

7. 點選左側選單的「API 和服務」→ 憑證

8. 點選「建立憑證」→ API 金鑰，即可取得 API 金鑰

9. 最後則要「限制 API 金鑰」，確保資訊安全（第一次建立 API 金鑰時，可設定「應用程式限制」和「API 限制」）

在「應用程式限制」項目依照應用程式類型選擇限制類型，如「HTTP 參照網址」、「IP 位址」、「Android 應用程式」或「iOS 應用程式」（一組金鑰只能設定一項應用程式限制），按「新增項目」並輸入您的網頁網址後即可按完成；在「 API 限制」部分，則是可選擇限制金鑰，從「選取 API」 下拉式選單中，選擇您要允許利用 API 金鑰存取的 API 或 SDK。

10. 最後按下儲存，即可複製 API 金鑰，於網站使用

如何綁定信用卡?

用戶在取得 API 金鑰後，仍需綁定信用卡並啟用計費功能，才可以使用付費的 Google Map API 功能，步驟如下：

1. 在 Google Cloud Platform 的控制台點選左側選單的「帳單」
2. 點選「連結帳單帳戶」

3. 此時會跳出「啟用專案的計費功能」對話框，點選「建立帳單帳戶」

4. 選擇最符合你的專案類型，並勾選同意條款後按「繼續」

5. 輸入電話號碼收取簡訊認證碼完成身分驗證

6. 輸入個人或公司資料後在付款方式底下輸入信用卡資訊

7. 點選「開始免費試用」

8. 點選「前往連結的帳單帳戶」

9. 確認國家及付款貨幣資料

10. 提交並啟用計費功能

透過以上的步驟，就能在網站或 APP 中串接地圖資訊，而由於每個平台（如網站與 APP）的功能、需求以及目的不同（例如需要交通路線嗎？還是需要全景相片呢？），軟體開發者需啟用的 Google Maps API 也不同，各式 API 可參考 Google Developers 官網進一步了解。也歡迎聯繫 CloudMile，由專人解答您的疑問。