[筆記] Google Place API 串接 (Google Map 系列服務)

章節連結

Alpha Camp 的第二學期課程,讓大家試試水溫串接 API。在心血來潮下,想說串接個 Google Map 的 API 來玩玩看。不過要做的準備工作還真不少,以下是試驗不少次後所得到的心得。
web development


串接前的準備工作

1. Google Cloud

請進入 Google Cloud 網站,並點選免費試用(Free Trial),完成註冊手續(選取地點和輸入信用卡資訊)。google api intro-4google place api intro完成後,請創建一個專案,並進入”API 和服務” 設定頁面,尋找要開啟的API並啟用。(這裡以 Google Place API 為例)
google place api
完畢後,點選”API 和服務” 設定頁面裡的”憑證”,然後建立一組憑證,讓你的程式可以呼叫。
google api intro再來,為了避免有心人士濫用你的憑證,所以要進入憑證的設定頁面,限制可以存取的 API。在這裡,選取所有有關地圖服務的API後,儲存設定。
AlphaCamp,CSS,HTML,JavaScript當你的網頁完成後,若你要上傳到某網域(如:github),記得要限制應用程式的存取方式。在這邊,我是使用參照網址和網站限制,換言之,就是這幾個網域來的呼叫,Google才會回傳資料。
google api intro-3


2.存取方式

Google 若在本機端直接用方才申請的憑證呼叫,其回傳資料都會有 CORS error 問題。目前唯一解法是載入 Google Library API 的Script 來存取。

實作步驟

Nearby Search

於 HTML 頁面時,請注意會有 Google Library 的程式碼要寫在自己的JavaScript前面,這樣才可以避免掉非同步處理的問題。

範例網頁請點此。


參考資料

1. Google Nearby Search Demo
2. Google Nearby Search Document

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:21