正在尋找一種在您的網站上嵌入WordPress谷歌地圖內容的方法？
與WordPress中的許多內容一樣，您可以通過多種不同的方式將Google地圖嵌入您的網站，具體取決於您想要包含的地圖內容型別。
在這篇文章中，我們將首先向您展示如何在沒有外掛的情況下在WordPress中新增Google地圖。然後，我們將推薦一些可以幫助您嵌入Google地圖的外掛，以及採用這種方法的一些好處。我們還將深入探討如何正確使用現在需要的Google Maps API。
最後，我們將以在WordPress上使用Google地圖的一些效能注意事項結束，並分享一些關於如何保持WordPress網站快速載入的提示，即使您確實需要嵌入Google地圖。
您可以單擊下面直接跳轉到特定部分或通讀整個內容。
現在需要Google Maps API
自2018年6月11日起，Google地圖現在需要API金鑰。如果您已經在您的網站上實施了Google地圖，但它不再工作，這可能就是原因。或者更確切地說，您缺少API金鑰。好訊息是，對於99%的人來說，它仍然應該是免費的。以下是Google Maps API定價。
谷歌地圖API定價
Google還每月為您的結算帳戶提供200美元的經常性信用額度，以抵消您的使用成本。因此，您可以看到，除非您生成數千個請求，否則在您的網站上使用Google地圖不會花費您任何費用。
還有什麼變化？沒什麼，但是如果您想在WordPress中使用Google地圖，您現在需要執行以下操作：
- 註冊一個Google Cloud Platform Console帳戶並進行配置。
- 新增您的帳單資訊，即使您可能永遠不會被收費。
- 將API金鑰新增到您的Google地圖嵌入程式碼或外掛設定中。
如何獲取Google Maps API金鑰
以下是有關如何獲取 Google Maps API 金鑰的步驟。
第1步
轉到谷歌雲平臺控制檯。如果您還沒有帳戶，請建立一個，它是免費的。
第2步
選擇或建立一個專案。
第3步
設定您的結算帳戶。即使他們會要求您將信用卡存檔，但絕不應該向您收費，除非您確實超出了高使用限制。
第4步
您將被要求選擇一種或多種產品。這取決於您使用的地圖型別。例如，如果您在沒有外掛的情況下在WordPress網站上嵌入地圖（如下面的進一步步驟所示），那麼您將選擇Google Maps Embed API。
谷歌地圖嵌入API
如果您使用的是Google Maps Widget之類的外掛（如下面的步驟所示），那麼您將選擇Google Maps Static API。
如果您使用第三方外掛或主題，他們應該有關於他們使用哪種型別的 Google 地圖部署的文件。不用擔心，您始終可以新增多種型別並在以後更改它們。
第5步
點選“ENABLE”。
啟用谷歌地圖API
第6步
單擊“API”，然後在“Credebtials”下，您將看到您的API金鑰。
谷歌地圖API金鑰
第7步
如果您只是嵌入您的Google Maps API金鑰，它將以純文字形式顯示在您的原始碼中。因此，您應該限制這一點，否則，人們可能會在他們的WordPress網站或專案上使用您的API金鑰並積累您的使用量。
為此，只需單擊您的API金鑰名稱，即可新增限制。對於您的WordPress網站，只需新增一個HTTP引薦來源網址就足夠了。比如https://yourdomain.com/*。這將允許它只在您的網站上撥打電話。
Google Maps API金鑰限制
如何在沒有外掛的情況下在WordPress中新增谷歌地圖
如果您只想嵌入簡單的地圖並且不需要自定義位置標記或其他註釋等更詳細的功能，則可以使用您每天使用的普通Google地圖網站嵌入Google地圖而無需外掛。
這是它的工作原理……
第1步：複製Google地圖嵌入程式碼
要開始使用，請使用Google地圖網站建立您想要嵌入的地圖。
例如，如果您想嵌入地點標記，請在Google地圖中開啟該地點。或者，如果您想嵌入路線，請在Google地圖中開啟路線。
獲得要嵌入的地圖後，單擊左上角的漢堡選單：
如何訪問嵌入程式碼
在選單項列表中，選擇Share or embed選項：
開啟嵌入選項
這將開啟一個Share彈出視窗。在該彈出視窗中，單擊Embed a map選項卡。
然後，您可以使用下拉選單選擇所需的尺寸。對於大多數WordPress網站，預設大小效果很好，但如果需要，您可以將地圖放大或縮小。
完成後，單擊Copy HTML按鈕複製嵌入程式碼：
谷歌地圖嵌入程式碼
然後，您需要將API金鑰新增到程式碼中。所以你的程式碼應該是這樣的：
<iframe src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY¶meters allowfullscreen></iframe>
第2步：將Google地圖嵌入程式碼新增到WordPress網站
現在，您需要做的就是將該嵌入程式碼新增到您想要包含地圖的文章或頁面中的WordPress站點。
如果您使用的是隨WordPress 5.0釋出的新的WordPress Gutenberg區塊編輯器，您可以通過新增自定義HTML塊並將嵌入程式碼貼上到塊中來做到這一點。不要忘記新增您的API金鑰。
如何在WordPress區塊編輯器中新增嵌入程式碼
您可以通過單擊塊上方的預覽按鈕來預覽地圖的外觀。
如果您仍在使用經典的TinyMCE編輯器，您可以通過開啟“文字”選項卡並將程式碼貼上到此處來新增Google地圖嵌入程式碼：
如何在WordPress Classic編輯器中新增嵌入程式碼
新增程式碼後，您可以返回到Visual選項卡以檢視地圖的實時預覽。
就是這樣！您剛剛學習瞭如何在沒有外掛的情況下在WordPress中新增Google地圖。
無需外掛即可使用Google My Maps嵌入更復雜的地圖
如果您想在多個位置標記、自定義註釋等方面獲得更多創意，您仍然可以做到這一點，而無需使用Google’s My Maps service的外掛。
My Maps是Google的官方工具，可讓您建立和共享自己的自定義地圖。有了它，您可以建立類似於以下示例的內容，其中包含許多自定義標記和使用者單擊標記時顯示的自定義資訊：
Google’s My Maps示例
以下是如何使用它將自定義Google地圖新增到WordPress。
第1步：在Google’s My Maps中建立您的地圖
要開始使用，請前往Google’s My Maps並建立一張新地圖。從那裡，您可以使用地圖構建器介面來構建您的地圖：
Google’s My Maps介面
雖然我們不會詳細介紹它，但此介面可讓您構建一些非常有創意的地圖。為了更深入地瞭解，谷歌的這篇幫助文章涵蓋了很多重要的功能。
第2步：生成嵌入程式碼
完成地圖構建後，您需要生成嵌入程式碼。
但是，在獲得該程式碼之前，您首先需要公開您的地圖。為此，請單擊“Share”按鈕。然後，單擊彈出視窗中的Change…：
Google’s My Maps分享設定
然後，選擇On – Public on the web並單擊Save：
開啟連結分享
完成後，單擊地圖示題附近的下拉選單，然後選擇在Embed on my site以生成實際的嵌入程式碼：
訪問“My Maps”嵌入程式碼
這將開啟一個包含程式碼的彈出視窗，您應該複製該程式碼。不要忘記新增您的API金鑰。
My Maps嵌入程式碼
第3步：將嵌入程式碼新增到WordPress網站
現在，您可以將該嵌入程式碼新增到您的WordPress網站，就像您從常規Google地圖網站獲得的嵌入程式碼一樣。
如果您不確定如何操作，請單擊此處從上方跳轉到教程的該部分。
改用WordPress谷歌地圖外掛
除了上面的手動方法之外，還有大量的WordPress Google Maps外掛可以幫助您在您的網站上嵌入地圖。
有幾個原因，您可能需要考慮使用這些外掛之一而不是手動方法：
- 它們使您可以使用簡單的介面建立更復雜的地圖。
- 您無需離開WordPress儀表盤即可完成所有操作。
- 其中一些連結到WordPress。例如，您可以將地圖示記連結到WordPress文章。
- 其中一些可以幫助您優化Google地圖的效能（稍後會詳細介紹）。
對於所有這些外掛，您需要先生成自己的Google Maps API金鑰，然後才能開始嵌入地圖。本教程向您展示瞭如何做到這一點。
谷歌地圖小部件
Google Maps Widget是一個簡單的Google Maps外掛，可讓您使用Google Maps Static API嵌入地圖，該API通過嵌入靜態影象而不是互動式地圖提供了一種對效能更友好的方法（我們將在下一節）。
如果您想要簡單輕巧的東西，這是一個不錯的選擇。啟用它後，您需要獲取Google Maps API金鑰並將其插入外掛的設定中。您可以將Google地圖新增到您網站上的任何小部件區域。然後，訪問者可以在燈箱中開啟更大的互動式地圖版本：
Google地圖小工具介面
如果需要，您還可以立即使用互動式地圖，專業版允許您使用簡碼將地圖嵌入網站的任何位置。
谷歌地圖簡單
Google Maps Easy可幫助您使用自己的標記和註釋建立自定義地圖。
新增標記時，您可以上傳自己的自定義圖示，在標記描述中包含文字和影象，等等。您還可以控制地圖的功能，例如選擇是否讓使用者放大：
谷歌地圖簡易介面
構建地圖後，您可以使用簡碼或PHP函式將其嵌入。
Intergeo
Intergeo是另一個流行的選項，可讓您使用自定義標記建立自己的地圖並控制地圖功能。
安裝並啟用外掛後，您將能夠直接從WordPress儀表盤構建地圖：
Intergeo介面
然後，您可以使用簡碼將它們嵌入您網站的任何位置。
谷歌地圖嵌入的古騰堡區塊
Gutenberg Block For Google Maps Embed是一個簡單的外掛，可將專用的Google Maps區塊新增到新的WordPress Gutenberg區塊編輯器中。
使用此塊，您可以嵌入任何地址並選擇：
- 方面
- 縮放級別
- 互動式地圖與靜態地圖（同樣，後一種方法有助於提高效能）
它不會讓您建立自己的自定義地圖 – 但如果您使用新的塊編輯器並且只是想要一種簡單的方法來包含一些簡單的地圖，這是一個方便的選擇。
谷歌地圖可以降低您的WordPress網站效能
雖然Google地圖允許您通過其互動式地圖將大量很酷的功能嵌入到您的站點中，但存在效能權衡，因為它需要載入大量指令碼來支援所有這些互動式功能。
長話短說，嵌入互動式Google地圖可能會降低您的網站速度。
有幾種方法可以解決這個問題。
首先，如果您不需要人們能夠在您的網站上以互動方式瀏覽您的地圖，那麼在沒有任何第三方工具的情況下加快速度的簡單方法是：
- 擷取地圖以在您的網站上使用
- 將該螢幕截圖連結到Google地圖網站上的地圖，或者在使用者單擊時開啟帶有互動式地圖的燈箱彈出視窗。
這樣一來，您的網站就只是載入了一張普通的圖片——而不是所有與谷歌地圖相關的指令碼。
作為手動執行此操作的替代方法，您還可以使用免費的AWEOS Google Maps iframe load per click外掛。此外掛會自動將Google Maps嵌入替換為通用佔位符影象。然後，如果使用者單擊Load Map按鈕，它將載入完整的谷歌地圖嵌入：
谷歌地圖佔位符圖片
或者，您也可以使用Google Maps Static API，它返回沒有任何JavaScript的常規影象。一些Google Maps外掛——包括Google Maps Widget和Gutenberg Block For Google Maps Embed——讓您在建立地圖時使用靜態API。
但是，我們意識到有時這種靜態方法並不能解決問題，很多人希望立即嵌入互動式Google地圖體驗。
如果是這種情況，另一個加快Google地圖速度的好方法是使用延遲載入。通過延遲載入，您的網站將等待載入任何首屏Google地圖嵌入，直到訪問者開始向下滾動頁面。這可以讓您的初始頁面載入時間快速，同時仍然可以讓您嵌入互動式Google地圖內容。
我們已經寫過關於如何延遲載入影象和視訊的文章，這與谷歌地圖的想法相同。
有一些外掛可以讓你做到這一點。例如，a3 Lazy Load外掛可讓您延遲載入iframe embeds，其中包括Google地圖：
延遲載入谷歌地圖
其他選項包括：
小結
如果您只想在您的網站上嵌入一個簡單的地圖，您可以使用內建的嵌入程式碼功能將Google地圖新增到WordPress，而無需使用外掛。或者，您可以使用Google我的地圖工具建立自己的自定義地圖並將其嵌入。
除了這些手動方法之外，還有很多WordPress谷歌地圖外掛可以讓您在不離開WordPress儀表盤的情況下進行大量控制。
無論您選擇哪種方法，都要注意使用Google地圖對效能的影響。嘗試僅在絕對必要時使用Google地圖，並考慮使用佔位符影象或延遲載入等策略來減少對效能的負面影響。
評論留言