Google Maps API - 網頁載入地圖 ( 起手式 )

Google Maps API 是我一直以來都很想研究的主題，在手機、行車記錄器與網路、GPS 發達的年代，每個人應該都有用過 Google Map，接下來想花些時間，好好的把 Google Maps API 學習學習，搞不好之後會很常用到也說不定。

啟用 Google Maps Embed API

如果要更近一步的操作地圖，必須使用 Google Maps API 來實現，要使用對應的 API，則是要用 Google 帳號登入 Google API Console，裡面包含了各式各樣的服務，每種服務都有提供一個以上的 API。

參考：Google API Console

一開始，最基本要啟用的是 Google Maps Embed API，點選 Google Maps Embed API 並且啟用就可以，啟用後，在專案的資訊主頁裡，就會看到出現對應的 API。

建立憑證

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

API 金鑰就是一段很長的代碼，這段代碼可以讓 Google 識別是哪個使用者在用對應的服務，並且根據使用者權限和使用的服務，提供對應的功能和限制。

建立金鑰之後最重要的事情，就是限制金鑰，限制金鑰也就是保護金鑰，避免金鑰外流造成別人也能用 ( 假設這個金鑰一天只能用 100 次，外流之後別人用了 99 次，你就只能用 1 次 )，限制的方法有以下幾種：HTTP 參照網址、IP 位址、Android 應用程式與 iOS 應用程式，舉例來說如果我將我申請的金鑰限制設定為 HTTP 參照網址，並且輸入我的 domain name 作為規則，這組金鑰就只能在我的部落格使用，別的網站就無法使用。

網頁嵌入地圖

記下剛剛申請的金鑰，就可以來把地圖放到網頁裡，放進去的語法只是用個iframe表現，填入金鑰以及地點，執行後就會看到網頁出現地圖，並且按照標示我們輸入的地址或地點，網址src的 URL，須按照 Google Maps Embed API 的要求撰寫：

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

先看到模式，模式分成下列五種：

• place 地點模式

  模式使用 place，就可以定義一個位置或地址，使用 place 時，後方會用q參數定義要在地圖上著重展示的地點，如果有遇到「空格」，可用 + 號表示，舉例來說，將 q 等於「高雄市政府」，打開網頁之後就會看到高雄市政府所在地出現標記。

  範例：demo01.html

    <iframe 
        width="600" 
        height="450" 
        frameborder="0" 
        style="border:0" 
        src="https://www.google.com/maps/embed/v1/place?key=你的金鑰&q=高雄市政府" 
        allowfullscreen>
    </iframe>
  

• directions 路線規劃模式

  路線規劃模式有幾個參數可以選擇，分別是：

  • origin 路線起點 ( 必須 )
  • destination 路線終點 ( 必須 )
  • waypoints 路線中間的點，可使用 | 符號分隔。
  • mode 旅行方式，包含 driving、walking、bicycling、transit 和 flying。
  • avoid 避開一些特殊線，包含 tolls、ferries 和 highways，可使用 | 符號分隔。。
  • units 單位，包含 metric 或 imperial。

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

  範例：demo02.html

    <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>
  

• Search 搜尋模式

  搜尋模式有三個參數：

  • q：搜尋的關鍵詞 ( 必須 )。
  • zoom：地圖的縮放大小，範圍從 0 到 21。
  • center：中心點經緯度。

  以下面的例子來說，將會標記出台北 101 周圍的 711 位置。

  範例：demo03.html

    <iframe
      width="600"
      height="450"
      frameborder="0" 
      style="border:0"
      src="https://www.google.com/maps/embed/v1/search?key=你的金鑰&q=711&zoom=14&center=25.033952,121.564360">
    </iframe>
  

• View 檢視模式

  在 view 的模式下，會傳回沒有標記或路線的地圖，而這個模式有幾個參數：

  • center：中心點經緯度 ( 必須 )。
  • zoom：地圖縮放大小，範圍從 0 到 21。
  • maptype：定義載入的地圖方塊類型，包含 roadmap 和 satellite ( 衛星空照 )。
  • language：定義 UI 元素以及地圖方塊上顯示的標籤要使用的語言。
  • region：根據地緣政治敏感度，定義要顯示的適當邊界與標籤。

  以下面的例子來說，將會使用衛星空照圖，以台北 101 為中心顯示。

  範例：demo04.html

    <iframe
      width="600"
      height="450"
      frameborder="0" 
      style="border:0"
      src="https://www.google.com/maps/embed/v1/view?key=你的金鑰&zoom=14&center=25.033952,121.564360&maptype=satellite">
    </iframe>
  

• streetview 街景服務模式

  街景模式能提供一個可將全景轉譯為球體的檢視器，而相機將位於球體的正中間，提供單一位置的完整 360 度檢視。 影像包含 360 度的水平檢視（全方位環繞）以及 180 度垂直檢視（垂直上下），這個模式有以下幾個參數：

  • location：經緯度，以逗號分隔 ( 必須 )。
  • pano：特定的全景 ID，如果沒有 location 一定要有這個參數。
  • heading：從北方順時針旋轉的角度指出相機指南針所指的方向 ( -180 ~ 360 )。
  • pitch：指定相機往上或往下的角度，預設為 0 ( -90 ~ 90 )。
  • fov：影像的水平視野，數字越大視野越廣，預設為 90 ( 10 ~ 100 )。
  • language：定義 UI 元素以及地圖方塊上顯示的標籤要使用的語言。
  • region：根據地緣政治敏感度，定義要顯示的適當邊界與標籤。

  以下面的例子來說，會顯示完整的台北 101 街景圖。

  範例：demo05.html

    <iframe
      width="600"
      height="450"
      frameborder="0" 
      style="border:0"
      src="https://www.google.com/maps/embed/v1/streetview?key=你的金鑰&location=25.032863,121.562943&heading=60&pitch=30&fov=90">
    </iframe>
  

小結

以上就是透過最基本的 Google Maps Embed API 所實現的地圖做法，這個做法雖然陽春，但也能滿足部分的地圖需求，接下來會在繼續把 Google 地圖的用法做個完整的練習。