使用google embed map 不只是單純秀出地點位置, 給予適當參數還能當作google map導航, 這個api很適合用在地點標示的餐廳或景點, 點出地圖就能知道要到目的地需要多少時間
指定規格是在<html>上使用<iframe>並在key=API_KEY這裡, 輸入取得的API KEY(如何申請API KEY請看這裡) ,
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>官網說明default的格式是長這樣:
https://www.google.com/maps/embed/v1/MODE?key=YOUR_API_KEY¶metersWhere:
{MODE}is one ofplace,search,view,directions, orstreetview.{YOUR_API_KEY}is your free API key.parametersinclude optional parameters, as well as mode-specific parameters.
利用src="api_url"來跟google請求所需要的資料, 這時候parameter就是你指定的參數,而mode就是你要使用模式, 依照上面的例子是用place也就是找尋地點, 根據我在google官方文件可以找到提供的參數如下:
q 地點 : 可用地點名稱譬如 台北101 , 台北火車站等 不需要輸入詳細地址
origin 起點: 這裡跟destination搭配可以算出對應的路近跟所花費的時間, 也有mode可以選擇, 像是開車, 或走路, 搭乘大眾運輸等
destination 終點: 說明與origin相同, 兩個須配合
waypoints 中途點: 這裡我的了解是起點跟終點中間經過哪些地方
詳細的參數說明可參考這裡
那來示範一下, 這次做的專題用到到的地方:
在express上面, 使用@google/maps利用api key先拿到response在render到前端,
googleMapsClient = require(‘@google/maps’).createClient({
key: process.env.API_KEY,
Promise: Promise})
因為要上傳到github這裡的API_KEY最好使用環境變數來設定避免明碼讓其他人看到你的API KEY而且就算你不處理上傳到GITHUB之後沒多久GOOGLE就會寄一封警告信來給你, 所以這裡要注意一下
最好使用非同步的方式, 否則到時候render時值還沒算好..
duration = await googleMapsClient.directions({
origin: location1,
destination: location2
}).asPromise()
.then((response) => {
return response.json.routes[0].legs[0].duration
})
.catch((err) => {
console.log(err);
})
使用googleMapsClient.directions來算出mode為direction兩個地點所需要的時間(response.json.routes[0].legs[0].duration)跟在地圖上顯示的路徑,
<iframe width=”450" height=”300" frameborder=”0" style=”border:0"
src=”https://www.google.com/maps/embed/v1/directions?key={{API_KEY}}&origin={{origin}}&destination={{destination}}">>
</iframe>
實際的效果就會像這樣:
那如果你是mode為place就是googleMapsClient.place在指定參數後就能得到reponse再從reponse裡找到你要的值…
後記: 如果要開發google api最好把環境先弄成https, 現在幾個好用的api如Maps Javasctip API 改版後標示需要https環境才能正常顯示, 所以開發前先把環境弄好, 才不會花很多時間在debug
