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

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

1.在 Google Developers Console 中啟用 Maps JavaScript API

2.為 Maps API 申請驗證金鑰並放入網頁

Google Maps JavaScript API 申請目的,是在 WordPress 網站中以外掛程式置入 Google 地圖時必須做的一件事,具體而言,所適用的對象就是想要自己架設網站或者想為網站中既有的 Google 地圖做改變時,一些可以自定義 Google 地圖外觀、功能、樣式的 WordPress 外掛程式,就會要求必須在 Google Developers Console 中申請 Maps JavaScript API 服務,並且申請驗證金鑰,如此才可以在網站載入過程中順利向 Google Maps 呼叫地圖服務,進而完整呈現 Google 地圖樣式。

如果不希望這麼麻煩,只想要單純在網頁上呈現普通版的 Goolge 地圖,那麼請參考這一篇教學:Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法,以下開始簡單的 Google Maps JS API 申請步驟。

Google Developers Console:https://console.developers.google.com/

Google Maps Platform(自動引導申請 Google 地圖服務):https://console.developers.google.com/

Google 獲取 API 金鑰說明文件:https://developers.google.com/maps/documentation/javascript/get-api-key

Google 地圖支援與說明:https://developers.google.com/maps/support/

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

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

• 設定 Google API 驗證金鑰流程

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

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

Google Maps JavaScript API

 

結語:

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

今天教學到此告一段落,不要忘記在右方訂閱鵠學苑,確保能第一時間收到最新 WordPress 教學文章!

Google 相關教學文章:

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

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

Google Map 教學 – 網站嵌入 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
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
分享在 twitter
Twitter
鵠學苑

鵠學苑

我們是由一群熱愛 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