找我們做網站
↑
Wordpress · WordPress 架站教學

Google 地圖出現開發用浮水印、無法顯示?綁定 API 帳單教學

WordPress 架站教學發布 2018.12.02更新 2026.10.02閱讀約 6 分鐘
Google 地圖出現開發用浮水印、無法顯示?綁定 API 帳單教學

重點整理
網站上的 Google 地圖顯示「For development purposes only」浮水印,通常是使用 Maps JavaScript API 的專案沒有綁定帳單帳戶。本文示範在 Google Cloud 新增帳單的步驟;若只需一般地圖,改用嵌入方式就不必呼叫 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 綁定信用卡教學步驟

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

Google地圖無法顯示
Google地圖無法顯示

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

Google地圖無法顯示
Google地圖無法顯示

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

Google地圖無法顯示
Google地圖無法顯示

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

Google地圖無法顯示
Google地圖無法顯示

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

Google地圖無法顯示
Google地圖無法顯示

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

Google地圖無法顯示
Google地圖無法顯示

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

Google地圖無法顯示
Google地圖無法顯示

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

Google地圖無法顯示
Google地圖無法顯示

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

Google地圖無法顯示
Google地圖無法顯示

2025 年起 Google 地圖 API 計費有什麼改變?

本文原本提到的 300 美元試用金與每月 200 美元抵免額,都已不是現在的計費方式。依 Google 官方文件,2025 年 3 月 1 日起:

  • 改成各服務分開計算免費用量:動態地圖、地點搜尋、路線等各項服務各有每月免費用量,超過的部分才計費。
  • 服務分成三個等級:Essentials、Pro、Enterprise,等級越高單價越高。
  • 仍要綁定帳單帳戶:沒綁帳單的專案,地圖還是會顯示開發用浮水印。

一般形象網站只顯示一張地圖時,用量通常不大;實際額度與單價請以 Google Maps Platform 價格頁為準。

怎麼避免地圖 API 產生意外費用?

  • 預算快訊只會通知,不會自動停用:在帳單裡設定預算後,達到金額時 Google 會寄信提醒,但 API 仍會繼續運作並計費。本文早期說達到預算就會停用服務,並不正確。
  • 用配額限制用量:在「API 和服務」對各 API 設定每日要求上限,超過就停止回應,才是真正的上限。
  • 限制金鑰:金鑰只允許自己的網域、只開放用到的 API,避免被別人盜用。
  • 不需要互動的地方用嵌入地圖:聯絡我們頁面放 iframe 即可,不必呼叫 API。

常見問題

Google Map API 還有免費額度嗎?

有,但計算方式改了。依 Google 官方文件,2025 年 3 月 1 日起,原本每月 200 美元的抵免額改為各項服務(SKU)各自的每月免費用量上限,並分成 Essentials、Pro、Enterprise 等級。實際額度請以 Google Maps Platform 價格頁為準。

Google 地圖出現 For development purposes only 怎麼辦?

通常是使用 Maps JavaScript API 的 Google Cloud 專案沒有綁定帳單帳戶,或 API 金鑰設定有誤、對應的 API 沒有啟用。綁定帳單並確認金鑰的網站限制包含你的網域後,重新整理網頁即可。

網站只是放公司地點,一定要綁信用卡嗎?

不用。在 Google 地圖按「分享 → 嵌入地圖」取得 iframe 程式碼貼到網站,不需要 API 金鑰,也不會產生費用。只有要自訂地圖樣式、多個標記或搜尋功能時,才需要用 API 並綁定帳單。

結語

Google API 啟用計費功能對於新站或流量並不高的網站而言其實差別不大,300美金的額度換算下來大概可以調用 Maps JavaScript API 兩萬多次,如果説網站有啟用快取(Cache)功能,又可以延長額度被用完的時間,但如果說您的網站屬於高流量,每日幾乎破萬人次會造訪,那麼在可以接受的金額範圍下,就只有付費給 Goolge 以繼續保有 API 的服務,或者使用嵌入 Google Maps 的方式一勞永逸了。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。