[筆記] Google Place API 串接 (Google Map 系列服務) @地瓜大的飛翔旅程

章節連結

串接前的準備工作

1. Google Cloud

2.存取方式

實作步驟

Nearby Search

參考資料

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

串接前的準備工作

1. Google Cloud

請進入 Google Cloud 網站，並點選免費試用(Free Trial)，完成註冊手續(選取地點和輸入信用卡資訊)。完成後，請創建一個專案，並進入”API 和服務” 設定頁面，尋找要開啟的API並啟用。(這裡以 Google Place API 為例)

完畢後，點選”API 和服務” 設定頁面裡的”憑證”，然後建立一組憑證，讓你的程式可以呼叫。

再來，為了避免有心人士濫用你的憑證，所以要進入憑證的設定頁面，限制可以存取的 API。在這裡，選取所有有關地圖服務的API後，儲存設定。

AlphaCamp,CSS,google api place,google api教學,google map api,google map api 教學,google place api教學,HTML,JavaScript,selfStudyProgrammingRecord

當你的網頁完成後，若你要上傳到某網域(如：github)，記得要限制應用程式的存取方式。在這邊，我是使用參照網址和網站限制，換言之，就是這幾個網域來的呼叫，Google才會回傳資料。

2.存取方式

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

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

1 2	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDunXykyoL8RJ97753IG7xoE305iQzXkoU&libraries=places&callback=initMap"> </script>

實作步驟

Nearby Search

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

範例網頁請點此。

//產生Google地圖取得餐廳資料,記得要載入Google API Library 
//latitude(緯度)和longtitude(經度)為數字, radius(半徑)的單位為公尺
function initMap(latitude, longitude, radius) {
  // Initial position 初始化位置
  let initialPosition = new google.maps.LatLng(latitude, longitude)
  // to create the map 創建地圖
  let map = new google.maps.Map(document.getElementById('map'), {
    center: initialPosition,
    zoom: 13 //(縮放比例，越大代表越近)
  });
  // the request for nearbySearch()
  let request = {
    location: initialPosition,
    radius: radius,
    types: ['bakery', 'cafe', 'supermarket', 'restaurant'] //類型可以自己看說明文件內有
  };
  // to do the nearbySearch() request to found types around the initial position
  let service = new google.maps.places.PlacesService(map)
  service.nearbySearch(request, NearbySearchCallback) //建立一組回傳函式NearbySearchCallback
}
// This function is called when nearbySearch() has done
function NearbySearchCallback(results, status, pagination) {
  getTotalPages(results)
  getPageData(1, results)
  //search 監聽器
  search.addEventListener('click', event => {
    event.preventDefault()
    let input = searchInput.value
    let chosenPlaces = []
    //console.log(input)
    const regex = new RegExp(input, 'i')
    chosenPlaces = results.filter(place => place.name.match(regex))
    //console.log(chosenPlaces)
    getTotalPages(chosenPlaces)
    getPageData(1, chosenPlaces)
    //有時間差問題，所以按下後不清空輸入值
  })
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    //more 監聽器
    more.addEventListener('click', event => {
      event.preventDefault()
      if (pagination.hasNextPage) { //最多可以取60筆資料，每次20筆
        sleep: 2; //規定要間隔2秒
        pagination.nextPage() //呼叫下一頁的函式
      } else {
        more.disabled = true
      }
    })
  }
}

//產生Google地圖取得餐廳資料,記得要載入Google API Library

//latitude(緯度)和longtitude(經度)為數字, radius(半徑)的單位為公尺

function initMap(latitude, longitude, radius) {

// Initial position 初始化位置

let initialPosition = new google.maps.LatLng(latitude, longitude)

// to create the map 創建地圖

let map = new google.maps.Map(document.getElementById('map'), {

center: initialPosition,

zoom: 13 //(縮放比例，越大代表越近)

});

// the request for nearbySearch()

let request = {

location: initialPosition,

radius: radius,

types: ['bakery', 'cafe', 'supermarket', 'restaurant'] //類型可以自己看說明文件內有

};

// to do the nearbySearch() request to found types around the initial position

let service = new google.maps.places.PlacesService(map)

service.nearbySearch(request, NearbySearchCallback) //建立一組回傳函式NearbySearchCallback

}

// This function is called when nearbySearch() has done

function NearbySearchCallback(results, status, pagination) {

getTotalPages(results)

getPageData(1, results)

//search 監聽器

search.addEventListener('click', event => {

event.preventDefault()

let input = searchInput.value

let chosenPlaces = []

//console.log(input)

const regex = new RegExp(input, 'i')

chosenPlaces = results.filter(place => place.name.match(regex))

//console.log(chosenPlaces)

getTotalPages(chosenPlaces)

getPageData(1, chosenPlaces)

//有時間差問題，所以按下後不清空輸入值

})

if (status == google.maps.places.PlacesServiceStatus.OK) {

//more 監聽器

more.addEventListener('click', event => {

event.preventDefault()

if (pagination.hasNextPage) { //最多可以取60筆資料，每次20筆

sleep: 2; //規定要間隔2秒

pagination.nextPage() //呼叫下一頁的函式

} else {

more.disabled = true

}

})

}

參考資料

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

按讚加入粉絲團

章節連結