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

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

1.Google Cloud Platform 網站 申請付費帳戶流程

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 地圖能夠正常顯示。

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

GCP 免費體驗服務說明頁:https://cloud.google.com/free/docs/gcp-free-tier

(小提醒:GCP 服務在綁定信用卡後會有 300 美金的免費額度,超過額度才會需要付費,並且必須要同意付費才會有費用產生,因此請放心按照本教學開通)

• 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 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

Google 相關教學文章:

Google Map 自訂外觀 – 客製化 Google 地圖樣式教學

Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法

Google Maps JavaScript API 申請 – 網站啟用 Google 地圖 教學

Google AdSense 教學 – AdSense申請在 WordPress 加入網站廣告

Google網站管理員 ( Search Console ) 驗證網站所有權的三種方式

Google reCAPTCHA 教學 我不是機器人 驗證按鈕 架站必學技能

[ 跳過recaptcha 驗證 ] – Google Invisible reCAPTCHA 隱形驗證碼 教學

使用 Google 自訂搜尋引擎取代WordPress站內搜尋步驟教學

Google 字體下載 – WordPress 字體快速分析及網頁字體設定

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁 必學技能!

Google Page Speed Insight 網站速度測試

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top