# 如何導入Google API至網站上

## 事前準備

Step1-

首先，需要申請一組 Google Cloud Platform 帳號


<br>

Step2-

帳號設定完成後，要建立一個專案，並且需要事先綁定一張信用卡，並且做一些基礎設定。


> 需事先設定一組帳單帳戶，綁定信用卡，才能開始使用。

<br>


> 在使用 Google Map 服務的時候，都必須先申請憑證才能使用，點選「憑證」，接著點選「建立憑證」，選擇 API 金鑰，就可以開始建立專屬的金鑰 key。

<br>

Step3 -

到資料庫尋找需要的API，啟用他，便可以利用該功能在網站上。


> 將需要的API功能啟用，加入專案，即可使用。

<br>

Step4-

功能啟用後，需要回到剛才設定的憑證，限制金鑰的流量，以防被有心人士使用導致配額不足。


## 介紹基本Google API

1.Maps JavaScript API - 將地圖添加到網頁中。 可以使用自己的數據和圖像自定義地圖。


<br>

2.Embed API - 通常僅包含單個URL和參數的簡單HTTP請求，將地圖添加到網頁中。可在地圖上的兩個或多個指定點間繪製一條路線，以顯示各種距離和旅行時間，並可列出各種交通工具：如步行，開車，騎自行車，公共運輸或飛機。


* 兩者的差異性


<br>

## 實作Google API

目標：


> 以使用者案例為例子，阿宅想參加五月天好想你演唱會，地點在台南市立體育場，因此我們讓阿宅從朝陽科技大學開始規劃出到該活動地點的位置。

<br>

本次我們將使用Google API 來完成A3_U1_C1 阿宅利用線上地圖規劃活動路徑
系統會自動導出活動場地路線給使用者參考。

### Directions API

利用 directions 規劃路線模式

> 路線規劃模式有幾個參數可以選擇，分別是：
>
> origin 路線起點 ( 必須 )
> destination 路線終點 ( 必須 )
> waypoints 路線中間的點，可使用 | 符號分隔。
> mode 旅行方式，包含 driving、walking、bicycling、transit 和 flying。
> avoid 避開一些特殊線，包含 tolls、ferries 和 highways，可使用 | 符號分隔。。
> units 單位，包含 metric 或 imperial。

<br>

舉例來說，下方的程式將會在地圖上，標記出從台北市政府前往台北小巨蛋的路線，路線沿途會經過台北 101 與國父紀念館。

<iframe
    width="600"
    height="450"
    frameborder="0" 
    style="border:0"
    src="https://www.google.com/maps/embed/v1/directions?key=你的金鑰&origin=台北市政府&waypoints=台北101|國父紀念館&destination=台北小巨蛋">
  </iframe>

[Demo2](https://www.oxxostudio.tw/demo/201707/google-maps-1-demo-02.html)

<br>

### Local Context Library API (研究中)

利用 Local Context 來規劃活動附近景點

> Local Context 可提供網站的使用者 Google 地圖高達 99% 全球涵蓋率、2,500 萬每日更新次數、每月經 10 億人驗證的地點資訊，針對單一目標地點，除了可以瀏覽原本頁面中的動態地圖外，同時添加了周遭更完整、全面的地理位置訊息，包括消費者最關注的興趣點資訊、路徑規劃與預估時間等；此外，當消費者點擊地圖上目標地點附近的 Marker 圖標或透過點擊插件提供的地標照片集中任一照片時，即可輕鬆瀏覽該地標詳細資訊與更多照片。


一般載入動態地圖的程式碼範例如下（尚未納入Local Context）：

const myCoordinates = {lat: -41.2847, lng: 174.7681};
const map = new google.maps.Map(
document.querySelector(‘#map-container’),
center: myCoordinates,
zoom: 16
);

採用Local Context地圖的程式碼範例如下：

const myCoordinates = {lat: -41.2847, lng: 174.7681}; //列出經緯度
const lcMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector(‘#map-container’),
placeTypePreferences: [
‘bakery’, ‘cafe’, ‘clothing_store’, ‘drugstore’, ‘park’,
‘restaurant’, ‘shopping_mall’, ‘tourist_attraction’, ‘university’ // 列出該經緯度附近的景點有什麼
],
maxPlaceCount: 24,
});
const map = lcMapView.map;
map.setOptions({
center: myCoordinates,
zoom: 16
});


> 可自訂Local Context 地圖樣式來符合企業品牌網站設計樣式

<br>

## 參考網站

[Google API 文件說明](https://developers.google.com/maps/documentation/api-picker?hl=zh-tw)
[Google Maps API - 網頁載入地圖](https://www.oxxostudio.tw/articles/201707/google-maps-1.html)
[Google Maps API - 使用地圖與基本設定](https://www.oxxostudio.tw/articles/201707/google-maps-2-map-class.html)
[Local Context介紹](https://www.hkmci.com/zh-hant/google-maps-platform-local-context/)