目次
網頁無法正確載入 Google 地圖?
製作網頁設計都知道,Google Map做為店家的交通指示以及周邊景點功能是相當方便直覺的,重點是免費使用,但最近在網站上看到「這個網頁無法正確載入 Google 地圖」?小編一驚! 原來是Google Map 2018.07.16以後開始收費了。必須申請google map api key,還必須綁定信用卡才可繼續使用google map。
網頁設計小編教你怎麼申請google api key,讓您網站上的google map不會被上浮水印。
(其實也只是被放上「開發中 For development purposes only」的浮水印而已,原有功能都正常。)
本篇文章說明順序:
- 哪種Google Map會被收費?
- Google Map怎麼收費?是否有免費額度?
- 如何申請Google Map API KEY?
- 如何啟用Google Map API?
- 如何連結信用卡付款資料?
- 如何設定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. 【如何選擇網站設計素材?】應該使用圖庫照片,還是請攝影商來拍照?
-
27Sep.2305May.1615Nov.21