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

Google Map 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。


js部份

把Google Map 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. 抓目前位置、計算到各點距離

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
Publisher Logo

2 Replies to “Google Maps API學習筆記-4:place API自動完成地址、地點評論摘要”

  1. 你好,我對地圖網站有興趣,但從未接觸過程式,可以推薦我入門的書籍,到google map的相關資料嗎
    上面寫的東西我很努力讀懂,但還是看不懂

    1. 如果沒接觸過程式,一開始就用API會很困難,因為跳太快了。

      我自己的歷程是:
      先從html開始學,google一下html,有很多網站都有寫教學文,先知道每一個標籤代表的是什麼。
      接著開始看CSS,學會頁面上的樣式是怎麼寫出來的。
      之後才開始學JavaScript,然後才是API,API簡單的摸索了一陣子後,才開始用Google Maps的。

      自己是因為工作的關係,才會每天都接觸到,然後一點一點的學起來的。

      如果是想要上一個有完整規劃的課,之前有朋友也想學前端,他看了吳哲宇大大的課學的還蠻快的,幾個月後就開始問我js的問題。
      https://hahow.in/courses/56189df9df7b3d0b005c6639/main
      他這個課時數長,而且其實也不便宜,如果真心想學的話可以參考(回著回著像在業配,只好在這句點XD)。

留言