Google Maps API 筆記 - 載入地圖起手式 Google Maps Embed API

地圖應用已經廣泛的在各產業結合，許多服務都需要使用 Google Maps，剛好專案上有機會來研究，就來做個筆記。

申請 Google API

自從 2018 年 Google Maps 服務開始收費後，就必須要有一個 API 才能使用提供的服務，有 Google 帳號就可以申請，至於申請細節可以看官網或參考這篇。

有幾點要注意：

每個月有 200 美元的額度可以使用，只要單月不超過免費點擊次數(28,000 次)，就不會被收費。
因為是自己研究與純練習，所以在應用程式限制的地方我有限制指定網域。
需要綁定信用卡，但如果沒有繳費，只是會出現浮水印而已，其他功能正常。
API 金鑰取得後，務必保存好，避免被他人存取使用，導致會有帳單產生。
可設定單日上限次數，避免一個月超過免費額度。

這裡就不贅述 API 申請流程與設定部分。

Google Maps Embed API

在 Google Maps 有 Google Maps Embed API 選項，選擇後可以看到這個頁面，

會看到下方是使用 <iframe> 的方式嵌入網頁的，

填入金鑰以及地點，執行後就會看到網頁出現地圖，並且按照標示我們輸入的地址或地點，網址 src 的 URL，須按照 Google Maps Embed API 的要求撰寫：

1	https://www.google.com/maps/embed/v1/模式?key=你的金鑰&參數

有分幾個模式，來看一下。

place 地點模式

使用 place 時，後方會用 q 參數定義要在地圖上著重展示的地點，若有遇到「空格」，可用 + 號表示，例如，如果要找衛生福利部，就在上方頁面框輸入該名稱，地圖會自動跳到所搜尋的地點，並且要求填入 API key，完成後會出現一串網址如下方所示(所輸入的地點會變成一串亂碼，這邊就用衛生福利部代替)，只要複製該網址貼到編輯器，再到限制的網域查看，就可以看到其結果囉!

<iframe
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=你的金鑰
    &q=衛生福利部"
  allowfullscreen
>
</iframe>

Place Demo

Search 搜尋模式

此模式設定方式與地點模式相同，官方範例是可以搜尋指定地點附近的餐廳或是商店，有多三個參數，例如我今天想找在台北捷運昆陽站附近 7-11(這是搜尋關鍵字內容)，就會得到下方網址：

<iframe
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  src="https://www.google.com/maps/embed/v1/search?q=台北捷運昆陽站附近 7-11&key=你的金鑰"
  allowfullscreen
></iframe>

可加入的參數：

q：搜尋的關鍵詞 ( 剛剛你填寫的內容 )。
zoom：地圖的縮放大小，範圍從 0 到 21。
center：中心點經緯度。

Search Demo

directions 路線規劃模式

只要在網頁輸入起始地點 Origin 跟抵達地點 Destination，就可以了

<iframe
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  src="https://www.google.com/maps/embed/v1/directions?origin=衛生福利部&destination=台北捷運昆陽站&key=你的金鑰"
  allowfullscreen
></iframe>

Direction Demo

streetview 街景服務模式

在 location 的搜尋框內輸入準確的地址，為什麼是準確地址?原因是倘若今天搜尋總統府，會跑到總統府裡面，但我可能只是要搜尋總統府廣場，所以要準確的輸入搜尋關鍵字，不過 Google 很貼心會自己跑出對應的關鍵字，一樣會得到相對網址。

pano：特定的全景 ID，如果沒有 location 一定要有這個參數。

<iframe
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  src="https://www.google.com/maps/embed/v1/streetview?location=25.0399%2C121.5127&key=你的金鑰"
  allowfullscreen
>
</iframe>

這邊會出現以下的資訊。

location：經緯度，以逗號分隔 ( 必須 )。

可加入的參數：

heading：從北方順時針旋轉的角度指出相機指南針所指的方向 ( -180 ~ 360 )。
pitch：指定相機往上或往下的角度，預設為 0 ( -90 ~ 90 )。
fov：影像的水平視野，數字越大視野越廣，預設為 90 ( 10 ~ 100 )。
language：定義 UI 元素以及地圖方塊上顯示的標籤要使用的語言。
region：根據地緣政治敏感度，定義要顯示的適當邊界與標籤。

Streetview Demo

View 檢視模式

會得到一個沒有標記的地圖，網址如下：

<iframe
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  src="https://www.google.com/maps/embed/v1/view?zoom=17&center=25.0399%2C121.5127&key=你的金鑰"
  allowfullscreen
>
</iframe>

其中有看到幾個參數:

center：中心點經緯度 ( 必須 )。
zoom：地圖縮放大小，範圍從 0 到 21。

可加入的參數：

maptype：定義載入的地圖方塊類型，包含 roadmap 和 satellite ( 衛星空照 )。
language：定義 UI 元素以及地圖方塊上顯示的標籤要使用的語言。
region：根據地緣政治敏感度，定義要顯示的適當邊界與標籤。

View Demo

以上就是透過 Google Maps Embed API 來顯示地圖。

補充：如果是輸入中文，出來的結果都會是亂碼，以上範例是將亂碼位置用中文呈現。

提姆寫程式