[筆記] 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,google api place,google api教學,google map api,google map api 教學,google place api教學,HTML,JavaScript,selfStudyProgrammingRecord當你的網頁完成後,若你要上傳到某網域(如: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瀏覽人氣:401