如何在WordPress中添加Google Maps Store Locator

Do you want to add Google Maps store locator in WordPress? A store locator is a map pointing to your business location.

您是否要在WordPress中添加Google Maps商店定位器？ 商店定位器是指向您的营业地点的地图。

It allows users to locate you on the map, find driving directions, or share the location with friends. Adding a store locator to your business website or even an online store helps you instantly earn user trust.

它使用户可以在地图上找到您，查找行车路线或与朋友分享位置。 将商店定位器添加到您的企业网站或什至是在线商店，可以帮助您立即赢得用户信任。

In this article, we will show you how to easily add Google Maps store locator in WordPress.

在本文中，我们将向您展示如何在WordPress中轻松添加Google Maps商店定位器。

Google Maps introduced a paid API to display maps on websites. They still offer a limited free option to embed Google maps on small websites.

Google Maps引入了付费API，可在网站上显示地图。 他们仍然提供有限的免费选项，可以将Google地图嵌入小型网站 。

Most Google Maps plugins for WordPress use the Google API to retrieve and display maps. If you want to use a Google Maps plugin, then you will need to sign up with Google API platform and enable billing option.

大多数适用于WordPress的Google Maps插件都使用Google API来检索和显示地图。 如果您想使用Google Maps插件，则需要注册Google API平台并启用计费选项。

It is a pay as you go service, which means you will be charged based on the number of API calls made from your website.

这是一项随用随付的服务，这意味着将根据从您的网站进行的API调用次数向您收费。

We will show you both free and paid methods with their pros and cons, then you can choose the one that best suits your needs.

我们将向您展示免费和付费方法的优缺点，然后您可以选择最适合自己的方法。

方法1.免费将Google Maps添加到您的网站 (Method 1. Adding Google Maps to Your Website for Free)

This method is easier and free. The disadvantage is that you cannot show multiple stores on a single map.

此方法更简单，更免费。 缺点是您不能在单个地图上显示多个商店。

It is recommended for users who just want to add a single Google Maps store location on their website.

建议那些只想在其网站上添加单个Google Maps商店位置的用户使用。

First, you need to visit the Google Maps website on your computer. Next, enter your store’s address in the search field and Google Maps will show it on the map with a pinned marker on the map.

首先，您需要在计算机上访问Google Maps网站。 接下来，在搜索字段中输入商店的地址，然后Google Maps就会在地图上显示该商店，并在地图上显示固定的标记。

Make sure that the marker is placed on the correct location. You can select a zoom level by clicking the zoom button. Once you are satisfied with the zoom level, you need to click on the share button from the left column.

确保标记放置在正确的位置。 您可以通过单击缩放按钮来选择缩放级别。 对缩放级别满意后，需要单击左列中的共享按钮。

This will bring up a popup where you need to switch to the ‘Embed a Map’ tab. You will now see your searched location on the map with an HTML code.

这将弹出一个弹出窗口，您需要在其中切换到“嵌入地图”标签。 现在，您将在地图上看到带有HTML代码的搜索位置。

Click on the Copy HTML link to get the embed code.

单击复制HTML链接以获取嵌入代码。

Now head over to the admin area of your WordPress website. Once in the admin area, go ahead and edit the post or page where you want to display the store location map.

现在转到WordPress网站的管理区域。 进入管理区域后，继续编辑要显示商店位置地图的信息或页面。

Normally, users add a store location map on their contact form page with their phone number and opening hours.

通常，用户在他们的联系表单页面上添加商店位置地图及其电话号码和营业时间。

On the post edit screen, you need to add a custom HTML block.

在帖子编辑屏幕上，您需要添加一个自定义HTML块。

In the text area of custom HTML block, you need to paste the code you copied from Google Maps.

在自定义HTML块的文本区域中，您需要粘贴从Google Maps复制的代码。

You can now switch to the preview tab to see Google Maps embedded into your page. It will show your store location marked on the map with links to directions or to save the location.

现在，您可以切换到预览标签，以查看页面中嵌入的Google地图。 它将在地图上显示您的商店位置，并带有指向路线的链接或用于保存位置。

方法2.使用WordPress插件添加Google Maps Store Locator (Method 2. Add Google Maps Store Locator Using a WordPress Plugin)

This method is recommended for users who want to show multiple store locations on a Google Map.

建议要在Google地图上显示多个商店位置的用户使用此方法。

The first thing you need to do is in install and activate the WP Store Locator plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活WP Store Locator插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

It is a free Google Maps plugin that allows you to create a custom map with multiple store locations and custom fields.

它是一个免费的Google Maps插件，可让您创建具有多个商店位置和自定义字段的自定义地图。

The disadvantage of this method is that it requires you to add an API key. You will need to provide your billing information to use the API key. For pricing and other information, please check out the Google Maps Platform website.

此方法的缺点是它要求您添加API密钥。 您需要提供您的帐单信息才能使用API​​密钥。 有关价格和其他信息，请访问Google Maps Platform网站。

Ready, let’s get started.

准备好了，让我们开始吧。

Step 1. Generating Google Maps API keys

第1步：生成Google Maps API密钥

To use WP Store Locator plugin, you will need to generate two API keys. The first one is called the Browser API key and the second one is called the Server Key.

要使用WP Store Locator插件，您将需要生成两个API密钥。 第一个称为浏览器API密钥，第二个称为服务器密钥。

Let’s start with the Browser key first. Click on this Google Developer Console link and it will take you to the Google API website with all the required APIs enabled.

让我们先从浏览器键开始。 点击此Google Developer Console链接，它将带您进入启用了所有必需API的Google API网站。

You need to create a new project and give it a name that helps you identify the project. After that, you will have to wait a few moments as the console creates the project for you.

您需要创建一个新项目并为其命名，以帮助您识别该项目。 之后，控制台将为您创建项目，您将需要稍等片刻。

Next, you will be redirected to the API key configuration page. You need to provide a title for your API key, so you can easily identify it as the browser api key for your Google Maps project.

接下来，您将被重定向到API密钥配置页面。 您需要为API密钥提供标题，以便您可以轻松地将其标识为Google Maps项目的浏览器api密钥。

Next, you need to set ‘Application Restrictions’ to ‘HTTP Referrers’. Below that you need to set the ‘Accept requests from’ field to your domain name in the following format.

接下来，您需要将“应用程序限制”设置为“ HTTP Referrers”。 在此之下，您需要使用以下格式将“接受来自”字段设置为您的域名。

https://example.com/*
https://*.example.com/* (if you are using a subdomain)

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

Finally, click on the ‘Create’ button. The console will now save your settings and will show you the Browser key. You need to copy and paste this key in a text editor, you will need it later.

最后，点击“创建”按钮。 控制台现在将保存您的设置，并向您显示浏览器键。 您需要将此键复制并粘贴到文本编辑器中，以后将需要它。

Next, you need to create the server API key. Click on this Google Developer Console link and it will take you directly to the console with selected APIs enabled.

接下来，您需要创建服务器API密钥。 单击此Google Developer Console链接，它将直接带您启用所选API的控制台。

You will once again see the create project page. However since you have already created a project, you can just click on the drop-down menu and select your project.

您将再次看到创建项目页面。 但是，由于您已经创建了一个项目，因此只需单击下拉菜单并选择您的项目。

You will be then redirected to API configuration page. Provide a name for this API key that helps you recognize it as Server key.

然后，您将被重定向到API配置页面。 提供此API密钥的名称，以帮助您将其识别为服务器密钥。

Under the ‘Application restrictions’ section, you need to select IP Addresses. Basically, we are telling Google to only accept server requests coming from specific IP addresses.

在“应用程序限制”部分下，您需要选择IP地址。 基本上，我们告诉Google仅接受来自特定IP地址的服务器请求。

Now you would need to ask your WordPress hosting provider to tell you the IP range used by your hosting account. It would be in the following format:

现在，您需要让您的WordPress托管服务提供商告诉您托管帐户使用的IP范围。 格式如下：

172.16.0.0/12

172.16.0.0/12

After that, you need to click on the ‘Create’ button to save your settings and copy the Server API key.

之后，您需要单击“创建”按钮以保存设置并复制服务器API密钥。

Step 2. Setting up the WP Store Locator Plugin

步骤2.设置WP Store Locator插件

Once you have created your API keys, you need to head over to Store Locator » Settings page to set up the plugin.

创建API密钥后，您需要转到Store Locator»设置页面以设置插件。

Enter the Google Maps browser and server API keys you generated earlier. Next, select Maps language and region and then click on the save changes button to store your settings.

输入您先前生成的Google Maps浏览器和服务器API密钥。 接下来，选择地图语言和地区，然后单击保存更改按钮以存储您的设置。

Now, you need to scroll down on the settings page to the ‘Map’ section and enter a start point of the map. This start point could be a city or a country, so users can see markers placed at different locations.

现在，您需要在设置页面上向下滚动到“地图”部分，然后输入地图的起点。 该起点可以是城市或国家/地区，因此用户可以看到放置在不同位置的标记。

There are many other options on the settings page including map style, default zoom level, map type, search radius, country, etc. You can review them and adjust them to your needs.

设置页面上还有许多其他选项，包括地图样式，默认缩放级别，地图类型，搜索半径，国家/地区等。您可以查看它们并根据需要进行调整。

Once you are done, it is time to add locations.

完成后，就该添加位置了。

Step 3. Adding store locations

步骤3.添加商店位置

Head over to Store Locator » New Store page to add your first location. The New Store page will look just like the default post or page editor in WordPress.

转到“ 商店定位器”»“新商店”页面以添加您的第一个位置。 “新商店”页面将看起来像WordPress中的默认帖子或页面编辑器。

Provide a title for your store and then scroll down to ‘Store details’ section. From here, you need to enter your store address.

为您的商店提供标题，然后向下滚动到“商店详细信息”部分。 在这里，您需要输入您的商店地址。

You will see a map in the right column, however it will not automatically update to the address you have entered. You will need to click on the Publish button to save your location. After that, refresh the page and the map will point to the address you provided.

您会在右列中看到一个地图，但是它不会自动更新为您输入的地址。 您需要单击“发布”按钮以保存您的位置。 之后，刷新页面，地图将指向您提供的地址。

Now repeat the process to add other store locations. You can add as many store locations as you want.

现在，重复此过程以添加其他商店位置。 您可以根据需要添加任意多个商店位置。

Step 4. Adding the store locator map in WordPress

步骤4.在WordPress中添加商店定位器地图

To display your store locator on a WordPress page, simply create a new page or edit an existing one where you want to display the map.

要将您的商店定位器显示在WordPress页面上，只需创建一个新页面或编辑要在其中显示地图的现有页面即可。

On the post edit screen, you need to add the ‘Shortcode’ block to your post edit area. After that add the [wpls] shortcode inside it.

在帖子编辑屏幕上，您需要将“ Shortcode”块添加到帖子编辑区域。 之后，在其中添加[wpls]简码。

You can now save or publish your page and click on the preview button to see Google Maps store locator in action.

现在，您可以保存或发布页面，然后单击“预览”按钮以查看运行中的Google Maps商店定位器。

It will show your map markers for each store location and start the map from your preferred starting point. For example, in this map, it is focused on the city of West Palm Beach and showing two store locations on the map.

它将显示每个商店位置的地图标记，并从您首选的起点开始地图。 例如，在此地图中，它集中于西棕榈滩市，并在地图上显示了两个商店位置。

That’s all we hope this article helped you learn how to add Google Maps store locator in WordPress. You may also want to see our list of free Google Tools every site owner should use.

这就是我们希望本文能帮助您学习如何在WordPress中添加Google Maps商店定位符的全部。 您可能还希望查看我们的每个网站所有者应使用的免费Google工具列表。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-add-google-maps-store-locator-in-wordpress/