Google Maps API 學習筆記 – 4：Place API 自動完成地址、地點評論摘要

Google Maps API 基本使用請看這篇：

Google Maps API 學習筆記 – 1：地圖、標記、客製樣式

以下用到基本 Google Maps API 的部份就不再詳細解說。

開通 Places API

開通的網址在這：

https://console.cloud.google.com/apis/library/places-backend.googleapis.com

選好 GCP 上的專案後，按下「啟用」就行。

開通完 Place API，在頁面上引用 JS 就可以開始用了：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

「YOUR_API_KEY」要替換成 GCP 上拿到的 API Key。

自動完成地址

官方說明文件在這：Autocomplete for Addresses and Search Terms

主要功能就是，頁面上放一個搜尋框，只要 key 幾個字，就會出現一個下拉式選單，裡面是這個關鍵字的建議地點或地址，像這樣：

右下角的 powered by Google 是一定會有的，畢竟這是他們家的功能。

Place API 回傳資料的部份，還會傳像 Google Map 的地點評論，會給到前 5 則，像這樣：

本篇直接用 Vue.js 來接 API，比較方便。

HTML 部份

頁面上需要的東西：

• 引用 Place API
• 一個搜尋框
• 放 Google Map 的 div
• 放評論摘要的 div

範例如下：

這是簡單的 HTML 架構，本篇末附上的原始檔有加上 Boostrap 的 Grid。

JavaScript 部份

把 Google Maps API 拆成 2 個 methods，一個是初始化 map，一個是執行 place API，範例如下：

基本上，發現註解都加上去後，就沒什麼好寫的 XD。

地點評論摘要

需要說明的是，原本只是想用地址的自動完成功能，結果看回來的 place 資料時，發現只要是 Google Map 有評論資料的，也會回傳，就順便加進去了，輸入「市政府」後回傳的資料如下（資料太長，這邊就貼上網址）：

https://gist.github.com/letswritetw/54efdba7d93827aad119f1070ddec1e7

把評論也塞進去，每一次確認搜尋結果後，會看到的結果截圖如下：

本篇原始碼

https://github.com/letswritetw/letswrite-google-map-api-4

Google Maps API 學習筆記系列

1. 地圖、標記、客製樣式
2. 在地圖上畫個日本結界
3. 用熱圖（Heat Map）製作全台 12 小時雨量分佈圖
4. Place API 自動完成地址、地點評論摘要
5. 抓目前位置、計算到各點距離
6. 畫新冠肺炎分佈圖

Summary

Article Name

Google Maps API 學習筆記 - 4：place API 自動完成地址、地點評論摘要

Description

本篇大綱：開通Places API、自動完成地址、地點評論摘要、本篇原始碼。主要功能就是，頁面上放一個搜尋框，只要key幾個字，就會出現一個下拉式選單，裡面是這個關鍵字的建議地點或地址，右下角的powered by Google是一定會有的，畢竟這是他們家的功能。

August

Augustus

Let's Write

Let's Write

https://letswritetw.github.io/letswritetw/dist/img/logo_512.png