如何在WordPress中添加Google Maps Store Locator(免費選項)


您是否要在WordPress中添加Google Maps商店定位器? 商店定位器是指向您的營業地點的地圖。

它使用戶可以在地圖上找到您,查找行車路線或與朋友分享位置。 將商店定位器添加到您的企業網站或什至是在線商店,可以幫助您立即贏得用戶信任。

在本文中,我們將向您展示如何在WordPress中輕鬆添加Google Maps商店定位器。

如何在WordPress中添加Google Maps商店定位器

Google Maps引入了付費API,可在網站上顯示地圖。 他們仍然提供有限的免費選項,可以將Google地圖嵌入小型網站。

大多數適用於WordPress的Google Maps插件都使用Google API來檢索和顯示地圖。 如果您想使用Google Maps插件,則需要註冊Google API平台並啟用計費選項。

這是一項隨用隨付的服務,這意味著將根據從您的網站進行的API調用次數向您收費。

我們將向您展示免費和付費方法的優缺點,然後您可以選擇最適合自己的方法。

方法1.免費將Google Maps添加到您的網站

此方法更容易且免費。 缺點是您不能在單個地圖上顯示多個商店。

建議僅希望在其網站上添加單個Google Maps商店位置的用戶使用。

首先,您需要在計算機上訪問Google Maps網站。 接下來,在搜索字段中輸入商店的地址,然後Google Maps就會在地圖上顯示該商店,並在地圖上顯示固定的標記。

在Google地圖中共享地圖

確保標記放置在正確的位置。 您可以通過單擊縮放按鈕來選擇縮放級別。 對縮放級別滿意後,需要單擊左列中的共享按鈕。

這將彈出一個彈出窗口,您需要在其中切換到“嵌入地圖”標籤。 現在,您將在地圖上看到帶有HTML代碼的搜索位置。

複製Google Maps嵌入代碼

單擊複製HTML鏈接以獲取嵌入代碼。

現在轉到WordPress網站的管理區域。 進入管理區域後,繼續並編輯要在其中顯示商店位置地圖的帖子或頁面。

通常,用戶在他們的聯繫表單頁面上添加商店位置地圖及其電話號碼和營業時間。

在帖子編輯屏幕上,您需要添加一個自定義HTML塊。

在WordPress中添加自定義HTML塊

在自定義HTML塊的文本區域中,您需要粘貼從Google Maps複製的代碼。

地圖將代碼嵌入WordPress

現在,您可以切換到預覽標籤,以查看頁面中嵌入的Google地圖。 它將顯示您的商店位置,並在地圖上標記了指向路線的鏈接或用於保存位置。

在地圖上標記的商店位置

方法2.使用WordPress插件添加Google Maps Store Locator

對於想要在Google Map上顯示多個商店位置的用戶,建議使用此方法。

您需要做的第一件事是安裝並激活WP Store Locator插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

它是一個免費的Google Maps插件,可讓您創建具有多個商店位置和自定義字段的自定義地圖。

此方法的缺點是它要求您添加API密鑰。 您需要提供您的帳單信息才能使用API​​密鑰。 有關價格和其他信息,請訪問Google Maps Platform網站。

準備好了,讓我們開始吧。

第1步:生成Google Maps API密鑰

要使用WP Store Locator插件,您將需要生成兩個API密鑰。 第一個稱為瀏覽器API密鑰,第二個稱為服務器密鑰。

讓我們先從瀏覽器鍵開始。 單擊此Google Developer Console鏈接,它將帶您到已啟用所有必需API的Google API網站。

創建一個新項目

您需要創建一個新項目並為其命名,以幫助您識別該項目。 之後,控制台將為您創建項目,您將需要等待片刻。

接下來,您將被重定向到API密鑰配置頁面。 您需要為API密鑰提供標題,以便您可以輕鬆地將其標識為Google Maps項目的瀏覽器api密鑰。

瀏覽器API密鑰設置

接下來,您需要將“應用程序限制”設置為“ HTTP Referrers”。 在此之下,您需要使用以下格式將“接受來自”字段設置為您的域名。

https://example.com/*
https://*.example.com/*(如果您使用的是子域)

最後,點擊“創建”按鈕。 控制台現在將保存您的設置,並向您顯示瀏覽器鍵。 您需要將此鍵複製並粘貼到文本編輯器中,以後將需要它。

複製瀏覽器api密鑰

接下來,您需要創建服務器API密鑰。 單擊此Google Developer Console鏈接,它將直接帶您啟用所選API的控制台。

您將再次看到創建項目頁面。 但是,由於您已經創建了一個項目,因此只需單擊下拉菜單並選擇您的項目。

選擇您的Google Maps項目

然後,您將被重定向到API配置頁面。 提供此API密鑰的名稱,以幫助您將其識別為服務器密鑰。

設置IP限制

在“應用程序限制”部分下,您需要選擇IP地址。 基本上,我們告訴Google僅接受來自特定IP地址的服務器請求。

現在,您需要讓您的WordPress託管服務提供商告訴您託管帳戶使用的IP範圍。 格式如下:

172.16.0.0/12

之後,您需要單擊“創建”按鈕以保存設置並複制服務器API密鑰。

步驟2.設置WP Store Locator插件

創建API密鑰後,您需要轉到 商店定位器»設置 頁面以設置插件。

輸入Google Maps密鑰

輸入您先前生成的Google Maps瀏覽器和服務器API密鑰。 接下來,選擇地圖語言和地區,然後單擊保存更改按鈕以存儲您的設置。

現在,您需要在設置頁面上向下滾動到“地圖”部分,然後輸入地圖的起點。 該起點可以是城市或國家/地區,因此用戶可以看到放置在不同位置的標記。

為您的商店定位器地圖添加起點

設置頁面上還有許多其他選項,包括地圖樣式,默認縮放級別,地圖類型,搜索半徑,國家/地區等。您可以查看它們並根據需要進行調整。

完成後,就該添加位置了。

步驟3.添加商店位置

前往 店舖位置»新店鋪 頁面添加您的第一個位置。 “新商店”頁面將看起來像WordPress中的默認帖子或頁面編輯器。

店鋪地址

為您的商店提供標題,然後向下滾動到“商店詳細信息”部分。 在這裡,您需要輸入您的商店地址。

您會在右列中看到一個地圖,但是它不會自動更新為您輸入的地址。 您需要單擊“發布”按鈕以保存您的位置。 之後,刷新頁面,地圖將指向您提供的地址。

現在,重複此過程以添加其他商店位置。 您可以根據需要添加任意多個商店位置。

步驟4.在WordPress中添加商店定位器地圖

要將您的商店定位器顯示在WordPress頁面上,只需創建一個新頁面或編輯要顯示地圖的現有頁面即可。

在帖子編輯屏幕上,您需要將“ Shortcode”塊添加到帖子編輯區域。 之後添加 [wpls] 裡面的簡碼。

商店定位器簡碼

現在,您可以保存或發布頁面,然後單擊預覽按鈕以查看運行中的Google Maps商店定位器。

商店定位器地圖預覽

它將顯示每個商店位置的地圖標記,並從您的首選起點開始地圖。 例如,在此地圖中,它集中於西棕櫚灘市,並在地圖上顯示了兩個商店位置。

這就是我們希望本文幫助您了解如何在WordPress中添加Google Maps商店定位符的全部。 您可能還想查看我們每個網站所有者應使用的免費Google工具列表。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。