這個網頁無法正確載入Google 地圖? Google Map API 開始收費 ...

2018.07.16以後必須申請google map api key以及綁定信用卡才可繼續使用。

愛貝斯網頁設計教你怎麼申請google api key，讓您的網站不會被google map上浮 ... 首頁 設計i日誌 設計i日誌 所有日誌 SEO優化 網頁設計常見問題 網頁新知 網站工具說明 ESG企業永續 數位行銷 網頁設計介紹 21 Jul.18 網頁新知 這個網頁無法正確載入Google地圖?GoogleMapAPI開始收費了愛貝斯網頁設計教你怎麼申請GoogleMAPAPIKEY 回上一頁 網頁設計常見問題 網站工具說明 目次網頁無法正確載入Google地圖？本篇文章說明順序：哪種GoogleMap會被收費？GoogleMap怎麼收費？是否有免費額度？如何申請GoogleMapAPIKey？如何啟用GoogleMapAPI服務？如何連結信用卡付款資料？如何設定API配額，避免超量被收取費用？網頁設計文章推薦網頁無法正確載入Google地圖？ 製作網頁設計都知道，GoogleMap做為店家的交通指示以及周邊景點功能是相當方便直覺的，重點是免費使用，但最近在網站上看到「這個網頁無法正確載入Google地圖」? 小編一驚!原來是GoogleMap2018.07.16以後開始收費了。

必須申請googlemapapikey，還必須綁定信用卡才可繼續使用googlemap。

網頁設計小編教你怎麼申請googleapikey，讓您網站上的googlemap不會被上浮水印。

(其實也只是被放上「開發中Fordevelopmentpurposesonly」的浮水印而已，原有功能都正常。

) 本篇文章說明順序： 哪種GoogleMap會被收費？ GoogleMap怎麼收費？是否有免費額度？ 如何申請GoogleMapAPIKEY？ 如何啟用GoogleMapAPI? 如何連結信用卡付款資料？ 如何設定API配額(避免超量使用被收費)？ 哪種GoogleMap會被收費？ 首先說明一下，網站使用哪種GoogleMap不用被收費： 使用分享碼嵌入的GoogleMap不會被收費，分享碼使用的是iframe的形式來產生地圖，並非在網站內放入googlemapjavascriptsource。

看到左上角的資訊方框，以及右上角的登入框就是不用收錢的了。

大概是長這樣： 會被收費的是自訂GoogleMap形式，如改地圖顏色、換Mapicon、路線導航等都算是會被收費的範疇。

(大家都希望自已的網頁設計可以符合企業風格) 這種自訂的GoogleMap最大的優點就是擴充性高，可以自己標註周邊、換自己喜歡的顏色、拿來算距離等等，大家最常用的591租屋服務，用的就是自訂的GoogleMap。

可以擴充許多方便的功能，以及做到企業識別的目的。

自訂googlemap的原理就是網頁設計公司幫您使用googlemapjssource，並加上一組金鑰(apikey)，再融入前後端工程師的無數辛酸血淚撰寫而成的，大概是長這樣： GoogleMap怎麼收費？是否有免費額度？ 大家最關心的應該是...要收多少錢呢...？ GoogleMap是用載入次數(response)來計算費用的，目前每個月有200美金的免費額度，約可使用28,000次/月，可以簡單的理解，程式讀到地圖就算一次(這時候就要感謝萬惡的暫存，可以省個幾次...) 如果您是一般中小型的企業，網站使用流量不高倒是不用擔心，這部分可以從GA來評斷您的網頁map會不會被收錢。

※目前不綁定信用卡的話，好像也會直接跳浮水印... 另外也可以自訂收費額度，如果超過免費額度就自動停止服務。

事實上也只是被放上「開發中Fordevelopmentpurposesonly」的浮水印而已，其實功能都正常。

附上一張GoogleMap收費表給大家參考，一般會用到的是「動態地圖DynamicMaps」這個選項，每個月可免費使用28,000次載入，超過的話每1,000次收費7美金。

如果用量真的很大的，還是要斗內一下給Google啦。

  如何申請GoogleMapAPIKey？ 步驟一：進入GoogleCloudConsole網址  步驟二：登入您的gmail帳號 步驟三：選取專案   步驟四：新增專案   步驟五：輸入專案名稱(只能打英文)   步驟六：再次選取專案   步驟七：選取剛剛建立的專案   步驟八：建立API憑證 步驟九：限制憑證使用(以免被其他網站盜用) 步驟十：選擇HTTP網址參照，輸入自己的網址，後面記得+/*，這樣網站上的每一個頁面才能使用喔。

記得同時加上https開頭的網址(網站沒有https也沒關係) ex：http://www.ibest.com.tw/* ex：https://www.ibest.com.tw/* 步驟十一：將ApiKey複製下來給網頁設計廠商 如何啟用GoogleMapAPI服務？ 步驟一：回到資訊主頁，點選啟用api 步驟二：選擇查看全部  步驟三：選擇MapsJavaScriptAPI 步驟四：重複1~3步驟，啟用PlaceAPI、DirectionsAPI、DistanceMatirxAPI、GeocodingAPI。

下圖是我們會用到的API，共有5隻。

後續就看您網頁設計公司還幫你用了那些功能，就逐一啟用囉! 如何連結信用卡付款資料？ 步驟一：點開左上角三條線選項，選擇「帳單」 步驟二：連結帳單帳戶 步驟三：建立新帳戶 步驟四：同意並繼續 步驟五：輸入公司公司或個人資料。

(每隻筆都可以點選修改，沒有公司戶也可以改個人戶喔!!)。

最重要的就是第五點的輸入信用卡資料了.... 步驟六：前往連結的帳戶 步驟七：確認付款貨幣資料 步驟八：提交並啟用計費功能 如何設定預算？ 設定預算的目的是為了超量前收到通知，但這只是通知喔!並沒有停止API運作的功能。

必須要再進一步設定API配額才行，讓我們耐心繼續看下去。

步驟一：點選帳單>預算與快訊 步驟二：設定預算 步驟三：設定預算名稱後下一步 步驟四：可以把目標數字設定為190。

這邊小編是選擇不勾選「在費用中納入抵免額」選項 如何設定API配額，避免超量被收取費用？ 步驟一：點開左上角三條線選單，API和服務>資訊主頁   步驟二：選擇MapsJavaScriptAPI   步驟三：選擇配額後，下方表格選擇MapLoadsperday   步驟四：設定配額(每日)為1,000次 由於每個月200美金的免費配額為28,000次，小編在這邊算個整數，每日1,000次，超過就算斗內給google了...。

如果無論如何都不想被超收的話，可以設定900次，甚至更低。

但必須注意，這樣限制等於每天只有前900個使用者可以看的到網站上的地圖功能喔。

林林總總超多步驟，有用的話就幫忙分享喔! 19.08.07不斷更新!!!! 如果是在這天以前設定的google服務，有很大機率會被歸為免費版。

當你登入GoogleCloudPlateform介面的時候，最上方應該會出現有一條升級訊息。

點下去後按確認，等個1小時就可以繼續正常使用了。

不過還是建議回頭確認一下預算設定有沒有超過200元喔!!   網頁設計文章推薦 1.【UX/UI設計是什麼？】強化使用者的網站體驗，SEO經驗談 2.【飯店/民宿網頁設計】消費者要的不只是一張床，UX/UI設計談 3.【如何選擇網站設計素材？】應該使用圖庫照片，還是請攝影商來拍照？ 4.【CIS企業識別的重要性】網站想要做的好，企業識別不能少 5.【SEO文案怎麼寫才好看？】排名很重要，排版更重要！ 6. 【深色主題的網頁設計】探討黑暗模式的優缺點，配色如何使用？ 7. 【個資外洩怎麼辦？】身為購物車的管理業主，你必須知道的三大資安知識！ 8.【如何選擇網站設計素材？】應該使用圖庫照片，還是請攝影商來拍照？ 為什麼自己做SEO很容易失敗？SEO優化四大注意事項！ wordpress架站和網頁設計公司製作有什麼差異? 29 Jun.22 網頁新知 如何打造符合品牌定位的形象網站?5大重點須知 10 Sep.15 網頁新知 網路大不同 10 Apr.18 網頁新知 SSL憑證比較，免費SSL跟付費有什麼差別？ 16 Jan.20 網頁新知 我該準備哪些資料給網頁製作公司？Logo、文案等資料缺一不可 10 Sep.15 網頁新知 別再讓網友迷失在點擊中，2015年十大網頁設計趨勢 網站設計報價洽詢 填寫基本資料 聯絡人姓名＊ 先生 女士 聯絡電話＊ 電子信箱＊ 公司名稱＊ 公司電話 產業類型＊ 公司網址 從何得知本網站 Google搜尋 Yahoo搜尋 朋友介紹 我的需求主題(可複選) 案件報價 合作提案 使用線上訂房系統 其他洽詢問題 預計完成時間＊ 網頁建置預算＊ 參考網站 請簡述您的需求＊ 確認送出 網頁設計案例 設計費用 服務項目 設計流程 報價洽詢 TEL：04-3609-8678 FAX：04-2310-9978 E-MAIL：[email protected] ADDRESS：台中市西屯區大墩二十街99號4F ©2020iBestallrightsreserved. 報價洽詢