這個網頁無法正確載入Google 地圖? Google Map API 開始收費了 愛貝斯網頁設計教你怎麼申請Google MAP API KEY

網頁無法正確載入 Google 地圖？

製作網頁設計都知道，Google Map做為店家的交通指示以及周邊景點功能是相當方便直覺的，重點是免費使用，但最近在網站上看到「這個網頁無法正確載入 Google 地圖」?
小編一驚! 原來是Google Map 2018.07.16以後開始收費了。必須申請google map api key，還必須綁定信用卡才可繼續使用google map。



網頁設計小編教你怎麼申請google api key，讓您網站上的google map不會被上浮水印。
(其實也只是被放上「開發中 For development purposes only」的浮水印而已，原有功能都正常。)

本篇文章說明順序：

1. 哪種Google Map會被收費？
2. Google Map怎麼收費？是否有免費額度？
3. 如何申請Google Map API KEY？
4. 如何啟用Google Map API?
5. 如何連結信用卡付款資料？
6. 如何設定API配額(避免超量使用被收費)？

哪種Google Map會被收費？

首先說明一下，網站使用哪種Google Map不用被收費：
使用分享碼嵌入的Google Map不會被收費，分享碼使用的是iframe的形式來產生地圖，並非在網站內放入google map javascript source。
看到左上角的資訊方框，以及右上角的登入框就是不用收錢的了。
大概是長這樣：

會被收費的是自訂Google Map形式，如改地圖顏色、換Map icon、路線導航等都算是會被收費的範疇。(大家都希望自已的網頁設計可以符合企業風格)
這種自訂的Google Map最大的優點就是擴充性高，可以自己標註周邊、換自己喜歡的顏色、拿來算距離等等，大家最常用的591租屋服務，用的就是自訂的Google Map。可以擴充許多方便的功能，以及做到企業識別的目的。

自訂google map的原理就是網頁設計公司幫您使用google map js source，並加上一組金鑰(api key)，再融入前後端工程師的無數辛酸血淚撰寫而成的，大概是長這樣：

Google Map怎麼收費？是否有免費額度？

大家最關心的應該是...要收多少錢呢...？
Google Map是用載入次數(response)來計算費用的，目前每個月有200美金的免費額度，約可使用28,000次/月，可以簡單的理解，程式讀到地圖就算一次(這時候就要感謝萬惡的暫存，可以省個幾次...)
如果您是一般中小型的企業，網站使用流量不高倒是不用擔心，這部分可以從GA來評斷您的網頁map會不會被收錢。

※目前不綁定信用卡的話，好像也會直接跳浮水印...

另外也可以自訂收費額度，如果超過免費額度就自動停止服務。事實上也只是被放上「開發中 For development purposes only」的浮水印而已，其實功能都正常。

附上一張Google Map 收費表給大家參考，一般會用到的是「動態地圖 Dynamic Maps」這個選項，每個月可免費使用28,000次載入，超過的話每1,000次收費7美金。
如果用量真的很大的，還是要斗內一下給Google啦。


 

如何申請Google Map API Key？

步驟一：進入Google Cloud Console網址 

步驟二：登入您的gmail帳號

步驟三：選取專案

 

步驟四：新增專案

 

步驟五：輸入專案名稱(只能打英文)

 

步驟六：再次選取專案

 

步驟七：選取剛剛建立的專案

 

步驟八：建立API憑證

步驟九：限制憑證使用(以免被其他網站盜用)



步驟十：選擇HTTP網址參照，輸入自己的網址，後面記得+/*，這樣網站上的每一個頁面才能使用喔。
記得同時加上https開頭的網址(網站沒有https也沒關係)
ex：http://www.ibest.com.tw/*
ex：https://www.ibest.com.tw/*




步驟十一：將Api Key複製下來給網頁設計廠商

如何啟用Google Map API服務？

步驟一：回到資訊主頁，點選啟用api

步驟二：選擇查看全部 

步驟三：選擇 Maps JavaScript API

步驟四：重複1~3步驟，啟用Place API、Directions API、Distance Matirx API、Geocoding API。下圖是我們會用到的API，共有5隻。

後續就看您網頁設計公司還幫你用了那些功能，就逐一啟用囉!

如何連結信用卡付款資料？

步驟一：點開左上角三條線選項，選擇「帳單」

步驟二：連結帳單帳戶

步驟三：建立新帳戶

步驟四：同意並繼續

步驟五：輸入公司公司或個人資料。(每隻筆都可以點選修改，沒有公司戶也可以改個人戶喔!!)。最重要的就是第五點的輸入信用卡資料了....

步驟六：前往連結的帳戶

步驟七：確認付款貨幣資料

步驟八：提交並啟用計費功能

如何設定預算？

設定預算的目的是為了超量前收到通知，但這只是通知喔!並沒有停止API運作的功能。必須要再進一步設定API配額才行，讓我們耐心繼續看下去。

步驟一：點選帳單 > 預算與快訊

步驟二：設定預算

步驟三：設定預算名稱後下一步

步驟四：可以把目標數字設定為190。這邊小編是選擇不勾選「在費用中納入抵免額」選項

如何設定API配額，避免超量被收取費用？

步驟一：點開左上角三條線選單，API和服務 > 資訊主頁

 

步驟二：選擇Maps JavaScript API

 

步驟三：選擇配額後，下方表格選擇Map Loads per day

 

步驟四：設定配額(每日)為1,000次

由於每個月200美金的免費配額為28,000次，小編在這邊算個整數，每日1,000次，超過就算斗內給google了...。如果無論如何都不想被超收的話，可以設定900次，甚至更低。
但必須注意，這樣限制等於每天只有前900個使用者可以看的到網站上的地圖功能喔。


林林總總超多步驟，有用的話就幫忙分享喔!


19.08.07不斷更新!!!!
如果是在這天以前設定的google服務，有很大機率會被歸為免費版。
當你登入Google Cloud Plateform介面的時候，最上方應該會出現有一條升級訊息。
點下去後按確認，等個1小時就可以繼續正常使用了。
不過還是建議回頭確認一下預算設定有沒有超過200元喔!!
 

網頁設計文章推薦

1. 【UX/UI設計是什麼？】強化使用者的網站體驗，SEO經驗談
2. 【飯店/民宿網頁設計】消費者要的不只是一張床，UX/UI設計談
3. 【如何選擇網站設計素材？】應該使用圖庫照片，還是請攝影商來拍照？
4. 【CIS企業識別的重要性】網站想要做的好，企業識別不能少
5. 【 SEO 文案怎麼寫才好看？】排名很重要，排版更重要！
6. 【深色主題的網頁設計】探討黑暗模式的優缺點，配色如何使用？
7. 【個資外洩怎麼辦？】身為購物車的管理業主，你必須知道的三大資安知識！
8. 【如何選擇網站設計素材？】應該使用圖庫照片，還是請攝影商來拍照？