###### tags: `程式`

# API Code

## API畫面無法顯示(張阿宅)
###### abcdefghijklmnopqrstuvwxyz
###### ABCDEFGHIJKLMNOPQRSTUVWXYZ

http://littlething.goods-design.com.tw/google-map%E7%84%A1%E6%B3%95%E9%A1%AF%E7%A4%BA/

## 金鑰

AIzaSyDxzenQB6idMuQr6uusIAc4ZTjMVNPG7xQ

## 網頁嵌入地圖API

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

## 地圖導覽 (Maps JavaScript API)

* place 地點模式

Tips：place模式可以定義一個位置或地址，使用 place 時，後方會用q參數定義要在地圖上著重展示的地點，如果有遇到「空格」，可用 + 號表示。

例：舉例來說，將 q 等於「高雄市政府」，打開網頁之後就會看到高雄市政府所在地出現標記。

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


參考：[Demo01](https://www.oxxostudio.tw/demo/201707/google-maps-1-demo-01.html)

---

* directions 路線規劃模式

Tips：利用API規劃出路線路徑

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

例：舉例來說，下方的程式將會在地圖上，標記出從台北市政府前往台北小巨蛋的路線，路線沿途會經過台北 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>


參考：[Demo02](
)

## SAMPLE

<iframe
          width="600"
          height="450"
          frameborder="0" 
          style="border:0"
          src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyDxzenQB6idMuQr6uusIAc4ZTjMVNPG7xQ&origin=朝陽科技大學&destination=台南市立體育場">
        </iframe>