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

Google Maps JavaScript API 申請教學:啟用 API 與建立金鑰

WordPress 架站教學發布 2018.11.23更新 2026.10.02閱讀約 7 分鐘
Google Maps JavaScript API 申請教學:啟用 API 與建立金鑰

重點整理
想用外掛自訂 WordPress 網站上的 Google 地圖外觀與功能,需要先申請 Maps JavaScript API 金鑰:在 Google Cloud 主控台建立專案、啟用 Maps JavaScript API、建立 API 金鑰並設定限制。Google 地圖 API 需要綁定帳單帳戶才能正常顯示;只是嵌入一般地圖則不必申請。

Google Maps JavaScript API 申請目的,是在 WordPress 網站中以外掛程式置入 Google 地圖時必須做的一件事,具體而言,所適用的對象就是想要自己架設網站或者想為網站中既有的 Google 地圖做改變時,一些可以自定義 Google 地圖外觀、功能、樣式的 WordPress 外掛程式,就會要求必須在 Google Developers Console 中申請 Google Maps JavaScript API服務,並且申請驗證金鑰,如此才可以在網站載入過程中順利向 Google Maps 呼叫地圖服務,進而完整呈現 Google 地圖樣式。
如果不希望這麼麻煩,只想要單純在網頁上呈現普通版的 Goolge 地圖,那麼請參考這一篇教學:Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法,以下開始簡單的 Google Maps JS API 申請步驟。

Google 開發人員中心申請地圖 API

第一步:進入到上方提供的 Google Developer Console ,登入 Google 帳戶後,在左上角選擇要申請 Google Maps API 的專案,如下圖所示。

Google Maps JavaScript API
Google Maps JavaScript API

第二步:可以選取既有的專案加入,或者新增一個專屬於 Google Maps JS API 的專案

Google Maps JavaScript API
Google Maps JavaScript API

自訂專案名稱後,點選建立,筆者在此定義名稱為 Google Maps API。

Google Maps JavaScript API
Google Maps JavaScript API

第三步:在側邊選擇資訊主頁,進入後在上方點選啟用 API和服務。

Google Maps JavaScript API
Google Maps JavaScript API

第四步:進入後找到 Maps JavaScript API ,直接點選。

Google Maps JavaScript API
Google Maps JavaScript API

第五步:直接啟用 Maps JavaScript API 服務。

Google Maps JavaScript API
Google Maps JavaScript API

設定 Google API 驗證金鑰流程

第一步:啟用 Maps JavaScript API 服務後會進入以下畫面,在左上角點選憑證,接者點選建立憑證,之所以要在此申請憑證,為的就是獲得驗證金鑰,可以讓網站的 Google 地圖相關外掛程式可以透過金鑰與 Google Maps API 串接,同時也是一種服務啟用的驗證模式。

Google Maps JavaScript API
Google Maps JavaScript API

第二步:與使用 Google 社交登入網站服務的選項不同,在此只需要建立 API 金鑰即可,請點選 API 金鑰 。

Google Maps JavaScript API
Google Maps JavaScript API

第三步:點選後即建立完成,為了避免之後啟用其他 Google 應用程式服務時會混淆 API 金鑰用途,或者當 API 金鑰不小心外流時,能限制住 API 金鑰能夠被調用的位置。,因此請點選右下角的限制金鑰做進一步的設定。

Google Maps JavaScript API
Google Maps JavaScript API

第四步:進入後在應用程式限制上必須設定兩個項目,第一個是應用程式使用 Google API 的限制,因為是在網站上顯示地圖,所以要選擇 HTTP 參照網址(網站),第二是 HTTP 參照網址(網站)發出的要求,請輸入網站網址。

Google Maps JavaScript API
Google Maps JavaScript API

第五步:另外在 API 限制上選擇 Maps JavaScript API ,接者點選儲存。

Google Maps JavaScript API
Google Maps JavaScript API

第六步:儲存後的 API金鑰,可以在左上角選單圖示 → API和服務 → 憑證中可以查看。

Google Maps JavaScript API
Google Maps JavaScript API

在剛剛申請的 API 金鑰項目上點選複製按鈕

Google Maps JavaScript API
Google Maps JavaScript API

第七步:在這裡以 Elementor 的 Elementor Google Map Extended 外掛,將剛剛複製的 API 貼上後儲存變更。

Google Maps JavaScript API
Google Maps JavaScript API

下圖就是完成後的 Google Maps 顯示的樣式。

Google Maps JavaScript API
Google Maps JavaScript API

API 金鑰外洩或被盜用怎麼防?

網站上的 Maps JavaScript API 金鑰會出現在網頁原始碼裡,任何人都看得到,所以一定要設定限制:

  • 應用程式限制:選「網站」,只填自己的網域,例如 https://www.example.com/*。
  • API 限制:只勾選真的有用到的 API,不要讓一把金鑰能呼叫所有服務。
  • 設定預算與配額:在 Google Cloud 帳單設定預算提醒,必要時限制每日用量上限。
  • 發現異常就換金鑰:在「憑證」頁重新產生金鑰,換到網站上後再刪除舊的。

常見問題

Google Maps API 要付費嗎?

要綁定帳單帳戶才能使用,但 Google 每月提供一定的免費用量,一般形象網站的地圖顯示量通常不會超過。各項服務的免費額度與單價會調整,請以 Google Maps Platform 的價格頁為準,並設定預算提醒。

只想在網站放一張地圖,也要申請 API 金鑰嗎?

不用。在 Google 地圖按「分享 → 嵌入地圖」複製 iframe 程式碼,貼到網頁或 Elementor 的 Google 地圖小工具就能顯示,不需要金鑰。要自訂地圖樣式、多個標記或搜尋功能時才需要申請。

API 金鑰設好了,地圖還是顯示錯誤怎麼辦?

先檢查帳單帳戶是否已啟用、Maps JavaScript API 是否已啟用,以及金鑰的網站限制有沒有包含目前網域(含 www 與不含 www)。用瀏覽器開發人員工具的主控台看錯誤訊息,通常會直接寫出原因。

結語

最後要特別說明一點,只要是以 WordPress 外掛來為網站加入 Google 地圖,在外掛安裝完後絕大部分都會有可以設定 Google API 金鑰的欄位,基本上都會在外掛設定中,有些像是佈景主題所附加的 Google 地圖功能,則是會在主題設定中可以找到設定位置,如果在設定好 Google 地圖後發現網頁前端沒有正確顯示 Google 地圖,就可以去檢查 Google API 金鑰是否有正確設定。

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

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

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