---
# System prepended metadata

title: Google Map API(Distance Matrix Service)取得 年長者 旅程時間 及 距離
tags: [google map api, BuSafe]

---

# Google Map API(Distance Matrix Service)取得 年長者 旅程時間 及 距離


[TOC]

###### tags: `google map api` `BuSafe`

----

## 步驟

----

### 1. GCP設定帳號後申請API

----

### 2. 開一個Google Map API project 
![](https://i.imgur.com/V1HQooE.png)

----

### 3. 點選 [Distance Matrix API](https://console.cloud.google.com/google/maps-apis/api-list?project=atomic-energy-334607&supportedpurview=project) 申請 API 
![](https://i.imgur.com/NzoqQWX.png)

----

### 4.將API貼上程式碼
![](https://i.imgur.com/SrvE8DZ.png)

----

### 5. 啟用 [Distance Matrix Service](https://developers.google.com/maps/documentation/javascript/distancematrix)來計算長者與目的地通勤距離及時間
![](https://i.imgur.com/z3c29PW.png)


----


### 6. 啟用 [Geolocation Javascript API](https://developers.google.com/maps/documentation/javascript/examples/map-geolocation) 用來判別長者所在位置 是否 能在地圖上顯示
![](https://i.imgur.com/QGRCnJL.png)


----

### 7.設定交通方式程式碼
* 交通路徑:可選擇是否避開高速公路,收費路線
* 交通方式:可設定搭公車或走路
![](https://i.imgur.com/yHogCsd.png)


----

## Demo 
* 還未連線Google map API 前
![](https://i.imgur.com/RtQJBZo.png)

* 連線 Google map API 後 ---> 以 距離==由近到遠==排列,供長者決定旅程規劃
![](https://i.imgur.com/iJUP6om.png)

* 若長者移動位置,會同步更新當下Google map API 建議的時間與距離
![](https://i.imgur.com/AdGDiC0.png)

* 每連線一次 Google map API,Google後台會同步更新長者連線API次數
![](https://i.imgur.com/NGDeQGn.png)

----
## 程式碼
* [BuSafe Distance Matrix API (github)](https://github.com/shawn908304105770311071426/google_matrix_api)