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 幾個字,就會出現一個下拉式選單,裡面是這個關鍵字的建議地點或地址,像這樣:

自動完成地址demo
自動完成地址 Demo

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

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

google map上的評論摘要
google map上的評論摘要

本篇直接用 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

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

place API自動完成地址、地點評論摘要
Place API 自動完成地址、地點評論摘要

本篇原始碼

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


Google Maps API 學習筆記系列

  1. 地圖、標記、客製樣式
  2. 在地圖上畫個日本結界
  3. 用熱圖(Heat Map)製作全台 12 小時雨量分佈圖
  4. Place API 自動完成地址、地點評論摘要
  5. 抓目前位置、計算到各點距離
  6. 畫新冠肺炎分佈圖
Summary
Google Maps API 學習筆記 - 4:place API 自動完成地址、地點評論摘要
Article Name
Google Maps API 學習筆記 - 4:place API 自動完成地址、地點評論摘要
Description
本篇大綱:開通Places API、自動完成地址、地點評論摘要、本篇原始碼。主要功能就是,頁面上放一個搜尋框,只要key幾個字,就會出現一個下拉式選單,裡面是這個關鍵字的建議地點或地址,右下角的powered by Google是一定會有的,畢竟這是他們家的功能。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

MacBook 用隨身碟執行 Windows 10:Windows To Go、WinToUSB

Bot Telegram

Telegram Bot 學習筆記 – 4:命令列 Commands

Apps Script Google

用 Google Apps Script 取得 Google Sheets / Excel 資料

Front-End

JavaScript 載入方式 defer、async

Front-End

一個簡單的卡片樣式 Simple Card UI

Front-End

拿 Trello 當資料庫 建一個店家清單 – 上篇:Trello 基本使用

Vue

Nuxt.js 引用 Firebase SDK

Apps Script Google

Google Apps Script 基本使用:跨網域 AJAX、接 Firebase

Front-End

一些有趣的 CSS 選擇器

Front-End

用 Day.js 把秒數轉換為時間

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。