iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
0
自我挑戰組

網頁學習日誌系列 第 25

API : Google Maps API 設定(1)地圖顯示

為加深了解API的應用,這次使用的是Google Maps 來學習用JavaScript改API設定。

Google Maps API 網址:https://developers.google.com/maps/?hl=zh-tw

首先讓地圖顯示在網頁,有下列步驟:

1.選擇左邊使用中清單列中的JavaScript

https://ithelp.ithome.com.tw/upload/images/20200411/20107321zwYA1I7v1f.png

2.選擇上方清單列的手冊

https://ithelp.ithome.com.tw/upload/images/20200411/20107321C4xqLXMnYD.png

3.複製程式碼

位於hello world下方,右邊有按鈕可複製整個程式碼

https://ithelp.ithome.com.tw/upload/images/20200411/20107321kZiAgKt8WT.png

下方有些注意事項,要確認好才能讓地圖正確顯示:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321NNhrw6Etie.png

4.金鑰:

Google Maps 要用金鑰才能顯示如下方程式碼,只要在左邊選單可看到「取得金鑰」的文字。

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>//YOUR_API_KEY 為API金鑰

https://ithelp.ithome.com.tw/upload/images/20200411/20107321NrppeRC02N.png

金鑰有免費和付費的專案,目前這裡是用免費(標準API使用者)

如果想知道各方案內容可看這網頁
https://developers.google.com/maps/pricing-and-plans/?hl=zh-tw

https://ithelp.ithome.com.tw/upload/images/20200411/20107321c1dFZQZtD7.png

a .下方頁面有一個「取得金鑰」的按鈕,按下會跳出視窗

https://ithelp.ithome.com.tw/upload/images/20200411/201073216DrQOXHjR2.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321ZwfBJJy9YZ.png

b .選擇「+Create a new project」

https://ithelp.ithome.com.tw/upload/images/20200411/20107321LrBZjrvnun.png

c. 命名專案

https://ithelp.ithome.com.tw/upload/images/20200411/20107321aH0xOREeeU.png

d.複製下面金鑰

https://ithelp.ithome.com.tw/upload/images/20200411/20107321X66cu8deAb.png

e.取代YOUR_API_KEY 為金鑰

圖片黃色區塊為金鑰

https://ithelp.ithome.com.tw/upload/images/20200411/20107321N4UWkoZ3s3.png

網頁重新整理出現地圖

https://ithelp.ithome.com.tw/upload/images/20200411/20107321RJCJeb1A9U.png


上一篇
API : 提升網站服務品質!!
下一篇
API : Google Maps API 設定(2)地圖標記
系列文
網頁學習日誌30

1 則留言

0
rtfgvb74125
iT邦新手 5 級 ‧ 2020-03-23 17:02:35

是不是有東西lost掉了好像都沒有圖片

yuski iT邦新手 5 級 ‧ 2020-04-11 18:52:26 檢舉

謝謝你的提醒,文章已更新

我要留言

立即登入留言