完整指南：如何在 WordPress 中嵌入谷歌地圖

如何在 WordPress 中嵌入單個谷歌地圖位置

讓我們從在您的 WordPress 網站上顯示 Google 地圖位置的最基本方式開始。 如果您只想嵌入具有單個位置或視圖的地圖，則不需要任何花哨的工具或插件 -您只需將 Google 地圖嵌入代碼粘貼到您的 WordPress 站點中即可。

以下是它的工作原理：

像往常一樣訪問 Google 地圖網站並蒐索您要嵌入的位置。 你可以搜索任何東西。 那是：

• 整個國家
• 特定城市
• 特定業務
• 你給它起名字

真的沒關係！

獲得要在地圖上顯示的位置後，在左側邊欄中查找“共享”按鈕：

您應該會看到一個小彈出窗口。 單擊該彈出窗口中的嵌入地圖選項：

然後，從下拉列表中選擇您想要的尺寸。 選擇所需尺寸後，複製框中的代碼：

現在，前往您想要嵌入 Google 地圖框的 WordPress 帖子或頁面。

在 WordPress 編輯器中，切換到“文本”選項卡，然後將您從 Google 地圖複製的代碼粘貼到您希望地圖出現的位置：

現在，像往常一樣發布您的帖子，您應該會在 WordPress 網站的前端看到您的 Google 地圖框：

很容易，對吧？

您還可以使用類似的方法在 WordPress 中嵌入 Google 地圖方向。 唯一的區別是啟動界面。 您需要單擊漢堡圖標並選擇共享或嵌入地圖選項，而不是立即看到共享按鈕：

如何將具有多個位置標記的谷歌地圖嵌入 WordPress

如果你想在 WordPress 中嵌入一個帶有多個位置標記的谷歌地圖框，事情就有點不同了。

雖然我將在下一節中向您展示兩個 Google Maps WordPress 插件來幫助您完成此操作，但您實際上並不需要插件來完成它。

相反，您可以使用 Google 我的地圖創建自己的地圖，然後使用與上述方法類似的方法將該地圖嵌入 WordPress。

要開始使用，請前往 Google 我的地圖，然後單擊開始使用以啟動界面。 在界面中，單擊“創建新地圖”選項：

然後，使用該界面構建您的地圖。 開始可能有點棘手 - 但一旦掌握了竅門，它就很容易使用。 您可以使用搜索框搜索事物，也可以使用標記按鈕在地圖上添加標記：

對地圖感到滿意後，單擊頂部的三點圖標，然後選擇嵌入我的網站。

然後，就像以前一樣，您可以將 Google 地圖為您提供的代碼粘貼到 WordPress 編輯器的文本選項卡中，以在您的 WordPress 網站上顯示地圖。

WordPress 插件可幫助您更多地使用 Google 地圖

雖然您並不真正需要插件來處理我上面向您展示的基本 Google 地圖嵌入，但如果您想要更大的靈活性（或者如果您想要一種更用戶友好的方式來實現這種靈活性），插件可以派上用場。

大多數插件並沒有真正做任何你自己用足夠的肘部油脂做不到的事情——但它們確實讓它變得更容易和更用戶友好。 這裡有一些簡潔的插件可以幫助您更好地使用 Google 地圖。

WP 谷歌地圖

WP Google Maps 是 WordPress.org 插件目錄中最受歡迎的免費 Google Maps 插件。

它可以幫助您使用您選擇的地圖標記和不同的地圖主題創建自己的自定義 Google 地圖顯示。 基本上，它是我上面剛剛概述的過程的更用戶友好的實現。

唯一的缺點是免費版本只允許您創建一個地圖。 如果您需要多張地圖，則需要購買高級版或使用不同的解決方案。

要開始使用，請安裝並激活 WP Google Maps。 因為它在 WordPress.org 上列出，所以您可以直接從 WordPress 儀表板執行此操作。

激活它後，請轉到側邊欄中的新地圖選項以開始使用。

但是，在創建第一張地圖之前，您需要獲取 Google Maps JavaScript API 密鑰並將其輸入到插件的設置中。 您可以按照以下說明進行操作：

輸入 API 密鑰後，您可以編輯默認的我的第一張地圖（請記住 - 此插件的免費版本只允許您創建一個地圖）：

使用界面構建您的地圖。 然後，完成後，您可以使用簡碼將其嵌入您網站的任何位置：

它超級簡單和靈活——唯一的缺點是免費版本中的一張地圖限制。

地圖生成器

使用 WordPress 插件創建 Google Maps 嵌入的另一個不錯的選擇是 Maps Builder。

安裝並激活插件後，您將在儀表板側邊欄中獲得一個新的Google 地圖選項卡。 與 WP Google Maps 一樣，您需要先添加一個 Google Maps API 密鑰，然後才能開始使用該插件。

完成後，您可以轉到Google Maps → Add New以構建新地圖。 在該界面中，單擊Open Map Builder按鈕以啟動用戶友好界面：

在那裡，您可以使用插件的側邊欄構建地圖：

完成後，您可以使用插件創建的簡碼將地圖嵌入 WordPress 網站的任何位置。

WP商店定位器

如果您特別想使用 Google 地圖在您的 WordPress 網站上顯示多個商店位置（這是一個共同的願望！ ），您最好使用專用的商店定位器插件。

雖然您可以找到幾個插件來執行此操作，但我喜歡 WP Store Locator，因為它靈活且看起來很棒。

使用您最喜歡的頁面構建器的 Google 地圖模塊

大多數WordPress 頁面構建器都包含一個專用的 Google Maps 元素/模塊，以幫助您將 Google Maps 內容嵌入到您的設計中。

例如，流行的 Divi Builder 插件包括一個 Google Maps 模塊，您可以通過插件的界面對其進行自定義：

因此，如果您已經在使用頁面構建器，請檢查您的頁面構建器是否有 Google Maps 工具，然後再跑去找專用的 Google Maps 插件，

高級用戶的有趣調整

這種方法很先進，需要代碼知識——所以如果你是初學者，請隨意忽略它。

但是，如果您熟悉 WordPress 和自定義字段，您可以使用自定義字段根據 Google Maps Map URLs 方案自動創建地圖。

例如，您可以在 WordPress 後端創建一個字段，用戶只需將地址粘貼到某個位置即可。

然後，通過一些預處理來刪除空格，您可以將該地址插入到主題模板文件中的 iframe 中，如下所示：

瞧！ 用戶需要做的就是在 WordPress 編輯器中輸入一個地址，Google 地圖嵌入將自動出現在該位置的前端。

再說一遍——這種方法肯定需要 PHP 和自定義字段的基本知識——但它是一個很酷的 hack，可以節省一些時間。

收拾東西

無論您只是想做一些基本的事情，例如將常規的 Google 地圖位置嵌入 WordPress，還是使用多個地圖標記或自動地圖創建來獲得更高級的功能，您都有很多選擇。

對於嵌入單個地圖，您可能可以跳過插件而只使用常規的 Google Maps 嵌入代碼。 但是，如果您想創建具有多個位置的地圖並輕鬆控製樣式，那麼這兩個 Google 地圖插件是不錯的選擇。

最後，如果您使用的是頁面構建器，那麼在轉向外部解決方案之前，您絕對應該檢查您是否已經擁有 Google 地圖元素。