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

歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略– Google Maps ... 在網站載入過程中順利向Google Maps 呼叫地圖服務，進而完整呈現Google 地圖樣式。

Skiptocontent WordPress WordPress教學 ＷordPress主題 WordPress外掛 WordPress相關工具 WordPress客製 Elementor教學 WooCommerce WooCommerce教學 WooCommerce主題 WooCommerce外掛 WooCommerce客製 WordPress網頁設計 SEO工具 SearchConsole教學 GoogleAnalytics教學 GoogleAds教學 架站資源 聯絡我們 選單 WordPress WordPress教學 ＷordPress主題 WordPress外掛 WordPress相關工具 WordPress客製 Elementor教學 WooCommerce WooCommerce教學 WooCommerce主題 WooCommerce外掛 WooCommerce客製 WordPress網頁設計 SEO工具 SearchConsole教學 GoogleAnalytics教學 GoogleAds教學 架站資源 聯絡我們 搜尋 >WordPress>WordPress相關工具>GoogleMapsJavaScriptAPI申請–網站啟用Google地圖教學 WordPress相關工具,架站資源 GoogleMapsJavaScriptAPI申請–網站啟用Google地圖教學 內容目錄 Google開發人員中心申請地圖API設定GoogleAPI驗證金鑰流程結語： 歡迎回到鵠學苑—WordPress網頁設計超詳細攻略–GoogleMapsJavaScriptAPI申請目的，是在WordPress網站中以外掛程式置入Google地圖時必須做的一件事，具體而言，所適用的對象就是想要自己架設網站或者想為網站中既有的Google地圖做改變時，一些可以自定義Google地圖外觀、功能、樣式的WordPress外掛程式，就會要求必須在GoogleDevelopersConsole中申請GoogleMapsJavaScriptAPI服務，並且申請驗證金鑰，如此才可以在網站載入過程中順利向GoogleMaps呼叫地圖服務，進而完整呈現Google地圖樣式。

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

GoogleDevelopersConsole https://console.developers.google.com/ GoogleMapsPlatform（自動引導申請Google地圖服務） https://cloud.google.com/maps-platform/ Google獲取API金鑰說明文件 https://developers.google.com/maps/documentation/javascript/get-api-key Google地圖支援與說明 https://developers.google.com/maps/documentation/javascript/get-api-key Google開發人員中心申請地圖API 第一步：進入到上方提供的GoogleDeveloperConsole，登入Google帳戶後，在左上角選擇要申請GoogleMapsAPI的專案，如下圖所示。

第二步：可以選取既有的專案加入，或者新增一個專屬於GoogleMapsJSAPI的專案 自訂專案名稱後，點選建立，筆者在此定義名稱為GoogleMapsAPI。

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

第四步：進入後找到MapsJavaScriptAPI，直接點選。

第五步：直接啟用 MapsJavaScriptAPI服務。

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

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

第三步：點選後即建立完成，為了避免之後啟用其他Google應用程式服務時會混淆API金鑰用途，或者當 API金鑰不小心外流時，能限制住 API金鑰能夠被調用的位置。

，因此請點選右下角的限制金鑰做進一步的設定。

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

第五步：另外在API限制上選擇MapsJavaScriptAPI，接者點選儲存。

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

在剛剛申請的API金鑰項目上點選複製按鈕 第七步：在這裡以Elementor的ElementorGoogleMapExtended外掛，將剛剛複製的API貼上後儲存變更。

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

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

今天教學到此告一段落，不要忘記在右方訂閱鵠學苑，確保能第一時間收到最新WordPress教學文章！ 架站相關教學文章 實用KeywordTool！Google插件TrendEverywhere帶你看關鍵字熱度！ VideoDownloaderPLUS免費Chrome擴充功能，下載網站影片超簡單！ 網頁字體工具–識字體網站介紹，線上以圖找出網頁使用字型 ImageResizer線上圖片剪裁、修改大小，免費圖片編輯工具推薦！ oDownloader幫助你免費轉檔YouTube、FB和IG影片 Mailchimp設定教學–發送電子報、建立模板、預約寄送功能說明 Chrome瀏覽器線上office編輯工具介紹，免下載、離線也能編輯 網站架設知識推薦閱讀 麥肯錫疫情報告-疫情對消費者習慣的改變！ 部落格架站該如何選擇？Medium跟WordPress的優勢比較！ Google優先索引行動版內容將於一年內對所有網站實施 API金鑰GoogleMapAPI教學GoogleMapAPI申請Google地圖APIGoogle地圖教學MapsJavaScriptAPI GoogleMapsJavaScriptAPI申請–網站啟用Google地圖教學 2018-11-23T06:00:57+08:00 2020-12-23T17:53:03+08:00 鵠學苑 上一頁上一篇301轉址–Redirection外掛教學，WordPress轉址設定 下一篇GoogleMap自訂外觀–客製化Google地圖樣式教學下一篇 鵠學苑 我們是由一群熱愛WordPress網站架設的同好所組成的團隊，希望可以將這套頂尖的CMS管理系統推廣給想要架站的朋友們，並且能夠在過程中互相交流心得，讓網站架設過程變得更有效率！ 訂閱電子報 立即訂閱鵠崙設計(鵠學苑)！我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格！ Leavethisfieldemptyifyou'rehuman: 熱門文章 SearchConsole教學–Google索引與網站收錄狀態、移除網址 Mailchimp設定教學–發送電子報、建立模板、預約寄送功能說明 WordPressSMTP設定及MailServer架設 PerfectBrandsforWooCommerce幫你的商品做好品牌分類！ EasyTableofContents免費目錄外掛，快速提高瀏覽體驗！ 怎麼合理分配廣告費用？電商新手投放廣告的兩大重點！ WordPressShortcode教學–網頁設計基礎，運用簡碼加入網頁內容元素 免費網頁空間–000webhost免費虛擬主機，WordPress網站架設教學 實用KeywordTool！Google插件TrendEverywhere帶你看關鍵字熱度！ 快速檢查網站是否使用WordPress架設的三種方法！ 批量壓縮圖片提高網站的載入速度！EwwwImageOptimizer圖片壓縮工具教學 ＷordPress介紹 GoogleSearchConsole教學–AMP加速行動網頁項目操作說明 WordPressshortcode函式教學–建立自定義短碼顯示文字及圖片 最新文章 俐方體11號(Cubic11)開放原始碼，免費開源繁體中文點陣字型下載！ Gallerix俄羅斯線上博物館，17萬張高畫質名畫圖片免費下載！ Backupmp3免費線上Youtube轉換工具，輕鬆轉換成MP3、MP4下載！ ImageResizer線上圖片剪裁、修改大小，免費圖片編輯工具推薦！ Y2meta免費線上影片下載工具，輕鬆從Youtube和其他網站下載影片！ AnyConv免費線上轉檔工具，支援圖片、文件、影片等超過400種格式！ VideoCandy免費線上影片剪輯網站，裁切大小、調整速度輕鬆搞定！ CDKM免費線上轉檔工具，三步驟快速轉換！支援文件、圖像、影音格式！ 俐方體11號(Cubic11)開放原始碼，免費開源繁體中文點陣字型下載！ Gallerix俄羅斯線上博物館，17萬張高畫質名畫圖片免費下載！ Backupmp3免費線上Youtube轉換工具，輕鬆轉換成MP3、MP4下載！ ImageResizer線上圖片剪裁、修改大小，免費圖片編輯工具推薦！ Y2meta免費線上影片下載工具，輕鬆從Youtube和其他網站下載影片！ AnyConv免費線上轉檔工具，支援圖片、文件、影片等超過400種格式！ 相關文章 Hotjar錄影模式(Recordings)介紹教學，紀錄網站訪客網頁使用軌跡 oDownloader幫助你免費轉檔YouTube、FB和IG影片 俐方體11號(Cubic11)開放原始碼，免費開源繁體中文點陣字型下載！ ProductShot給你的圖片來個重點聚焦！讓你的截圖更豐富！ Hotjar意見統計(Polls)設定教學－網站訪客瀏覽體驗調查工具 ChromeFireShot網頁長截圖工具–網頁設計擴充功能教學 FIREFILE50GB的免費雲端空間！讓你更方便的儲存資料～ TinyPNG線上網頁圖片壓縮–照片壓縮不失真–png壓縮工具 MaceZip解壓縮程式–支援iOS解壓縮RAR格式檔案操作教學 Mac截圖教學–螢幕快照內建基本設定與操作示範圖解 MacKeKa壓縮程式–使用DockKeKa圖示快速建立壓縮檔案 ScreenTray截圖工具–比作業系統內建截圖更有效率的截圖神器 印刷色碼轉換–利用CMYK色碼找出Pantone彩通接近色 網頁icon資源分享(一)–iconbros及ElegantThemes介紹與使用方式 標籤雲 標籤ElementorPRO教學 Elementorwidget Elementor小工具 Elementor教學 GA教學 GA追蹤碼 GIF動畫 GoogleAds多媒體廣告 GoogleAds廣告活動 GoogleAds教學 GoogleAnalytics教學 GoogleConsole教學 GoogleGA GoogleSEO工具 Google分析 Google網站管理員 Google關鍵字廣告 hotjarfeedback Hotjar教學 Hotjar網站 SEO SEO優化工具 SEO工具 SEO教學 WooCommerceWordPress WooCommerce代管 WooCommerce外掛 WooCommerce客製 WooCommerce客製化 WooCommerce教學 WooCommerce維護 WooCommerce設定 WooCommerce購物車 WordPresstheme推薦 Wordpress主題 WordPress主題推薦 WordPress介紹 WordPress外掛 WordPress外掛 WordPress教學 WordPress登入 Youtube 免費線上工具 架站資源 網站分析 ©2015-2022鵠學苑｜WordPress教學｜WooCommerce教學｜隱私權政策｜訂閱電子報｜網站地圖 WordPressxWoocommerce鵠崙設計 回到頂端