Google地圖無法顯示,出現浮水印? 申請 API 帳單資料流程教學

Google地圖無法顯示 的問題有許多朋友來信想要了解如何解決 Google Maps 在網站無法正常顯示,會出現 For development purposes only 的浮水印文字,會發這樣狀況的原因是 Goolge 在 2018 年 10 月開始了新的 Google Maps Platform Terms of Service (Google 地圖服務條款),只要是使用 Maps JavaScript API 調用 Google 地圖顯示於網頁上,都必須在 Google Clound Platform 中加入帳單付款方式,在未超過 API 調用次數(免費 300 美金)的狀況下,依然可以保持免費使用 Google 地圖的資格。
因此在本篇教學中,要跟大家介紹如何在 Google Clound Platform 新增付款方式,讓 Google 地圖能夠正常顯示,如果說想要免去需要付費的麻煩,也可以參考這一篇文章:Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法,使用此方法在網頁中嵌入 Google 地圖服務,因為不需要透過呼叫 API 的方式來驗證 Goolge 地圖,因此不會有費用的問題。但如果你的網站所使用的 Google 地圖具有客製化樣式及功能,那麼就必須參考本篇教學,讓網頁上的 Google 地圖能夠正常顯示。
(小提醒:GCP 服務在綁定信用卡後會有 300 美金的免費額度,超過額度才會需要付費,並且必須要同意付費才會有費用產生,因此請放心按照本教學開通)

Google Cloud Platform 網站
https://console.cloud.google.com/apis/
Google Cloud Platform 付費帳戶說明網頁
https://cloud.google.com/billing/docs/how-to/manage-billing-account?hl=zh_TW&_ga=2.258812866.-990571010.1543026857
Google GCP 免費體驗服務說明頁
https://cloud.google.com/free/docs/gcp-free-tier

Google Cloud Platform 綁定信用卡教學步驟

第一步:如果沒有在 Google Clound Platform 中以信用卡綁定付費方式,網站中的 Google 地圖將會如同下方所示,出現浮水印與詢問視窗。

Google地圖無法顯示

第二步:進入到文章開頭提供的 Google Clound Platform 網址,登入後在左上角的選單圖示中找到帳單項目。

Google地圖無法顯示

第三步:選擇連結帳單帳戶的按鈕。

Google地圖無法顯示

第四步:在啟用 Google Maps  API 計費功能到提示框中選擇建立帳單帳戶。

Google地圖無法顯示

第五步:申請第一步驟中服務條款記得勾選,在右方會有 Google Clound Platform 啟用計費功能的說明,點擊同意並繼續。

Google地圖無法顯示

第六步:第二步驟按照個人資料填入即可。

Google地圖無法顯示

第七步:申請完成後會出現以下畫面,可以看到有 300 美金額度可以使用。

Google地圖無法顯示

第八步:在帳單中可以做一些設定,比較重要的是可以在預算與快訊中設定帳單的額度,比如說設定額度為 290 美金,當到達此金額時,就會自動停用 Goolge API 的支援服務,避免從信用卡中扣款。

Google地圖無法顯示

第九步:申請完成後回到網站重新整理,地圖就會正常顯示了。

Google地圖無法顯示

結語:

Google API 啟用計費功能對於新站或流量並不高的網站而言其實差別不大,300美金的額度換算下來大概可以調用 Maps JavaScript API 兩萬多次,如果説網站有啟用快取(Cache)功能,又可以延長額度被用完的時間,但如果說您的網站屬於高流量,每日幾乎破萬人次會造訪,那麼在可以接受的金額範圍下,就只有付費給 Goolge 以繼續保有 API 的服務,或者使用嵌入 Google Maps 的方式一勞永逸了。
今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

SEO 相關教學文章

網站架設知識推薦閱讀

麥肯錫疫情報告-疫情對消費者習慣的改變!
部落格架站該如何選擇?Medium跟WordPress的優勢比較!
Chrome 移除蓋版廣告?Google 12 項廣告體驗規範簡易說明

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端