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

您想在 WordPress 中添加 Google 地图商店定位器吗?商店定位器是指向您的营业地点的地图.

它允许用户在地图上定位您、查找行车路线或与朋友分享位置.将商店定位器添加到您的企业网站甚至在线商店,可帮助您立即赢得用户信任.

在本文中,我们将向您展示如何在 WordPress 中轻松添加 Google 地图商店定位器.

How to add a Google Maps store locator in WordPress

Google 地图引入了付费 API,用于在网站上显示地图.他们仍然提供有限的免费选项,可以在小型网站上嵌入谷歌地图.

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

这是一种即用即付的服务,这意味着将根据从您的网站进行的 API 调用次数向您收费.

我们将向您展示免费和付费方法及其优缺点,然后您可以选择最适合您需求的方法.

方法 1.免费将 Google 地图添加到您的网站

此方法更简单且免费.缺点是您无法在一张地图上显示多个商店.

推荐给只想在其网站上添加单个 Google 地图商店位置的用户.

首先,您需要在计算机上访问 Google 地图网站.接下来,在搜索字段中输入您商店的地址,Google 地图将在地图上显示它,并在地图上固定标记.

Sharing a map in Google Maps

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

这将弹出一个弹出窗口,您需要在其中切换到"嵌入地图"选项卡.您现在将使用 HTML 代码在地图上看到您搜索的位置.

Copy the Google Maps embed code

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

现在转到 WordPress 网站的管理区域.进入管理区域后,继续编辑要显示商店位置地图的帖子或页面.

通常,用户会在他们的联系表单页面上添加商店位置地图,其中包含他们的电话号码和营业时间.

在帖子编辑屏幕上,您需要添加自定义 HTML 块.

Adding a custom HTML block in WordPress

在自定义 HTML 块的文本区域,您需要粘贴您从 Google 地图复制的代码.

Maps embed code in WordPress

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

Store location marked on the map

方法 2.使用 WordPress 插件添加 Google 地图商店定位器

对于想要在 Google 地图上显示多个商店位置的用户,建议使用此方法.

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

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

此方法的缺点是需要您添加 API 密钥.您需要提供账单信息才能使用 API 密钥.有关定价和其他信息,请查看 Google Maps Platform 网站.

准备好,让我们开始吧.

第 1 步:生成 Google Maps API 密钥

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

让我们先从浏览器键开始.单击此 Google Developer Console 链接,它会将您带到启用了所有必需 API 的 Google API 网站.

Create a new project

您需要创建一个新项目并为其命名以帮助您识别该项目.之后,您将不得不等待一段时间,因为控制台会为您创建项目.

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

Browser api key settings

接下来,您需要将"应用程序限制"设置为"HTTP 引用".在此之下,您需要按照以下格式将"接受请求"字段设置为您的域名.

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

最后,点击"创建"按钮.控制台现在将保存您的设置并显示浏览器键.您需要将此密钥复制并粘贴到文本编辑器中,稍后您将需要它.

Copy browser api key

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

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

Select your Google Maps project

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

Set IP restrictions

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

现在您需要让您的 WordPress 托管服务提供商告诉您您的托管帐户使用的 IP 范围.它将采用以下格式:

172.16.0.0/12

之后,您需要点击"创建"按钮来保存您的设置并复制服务器 API 密钥.

第 2 步:设置 WP Store Locator 插件

创建 API 密钥后,您需要转到 Store Locator »设置页面来设置插件.

Enter Google Maps Keys

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

现在,您需要在设置页面上向下滚动到"地图"部分并输入地图的起点.这个起点可以是一个城市或一个国家,因此用户可以看到放置在不同位置的标记.

Add a start point for your store locator map

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

完成后,就可以添加位置了.

第 3 步:添加商店位置

前往商店定位器»新建商店页面以添加您的第一个位置.新商店页面看起来就像 WordPress 中的默认帖子或页面编辑器.

Store address

为您的商店提供标题,然后向下滚动到"商店详细信息"部分.从这里,您需要输入您的商店地址.

您会在右栏中看到地图,但它不会自动更新为您输入的地址.您需要单击"发布"按钮以保存您的位置.之后,刷新页面,地图将指向您提供的地址.

现在重复该过程以添加其他商店位置.您可以根据需要添加任意数量的商店位置.

第 4 步:在 WordPress 中添加商店定位器地图

要在 WordPress 页面上显示您的商店定位器,只需创建一个新页面或编辑您想要显示地图的现有页面.

在帖子编辑屏幕上,您需要将"Shortcode"块添加到您的帖子编辑区域.之后在其中添加 [wpsl] 短代码.

Store locator shortcode

您现在可以保存或发布您的页面,然后点击预览按钮查看 Google 地图商店定位器的运行情况.

Store locator map preview

它会显示每个商店位置的地图标记,并从您的首选起点开始绘制地图.例如,在此地图中,它侧重于西棕榈滩市并在地图上显示了两个商店位置.

这就是我们希望本文能帮助您了解如何在 WordPress 中添加 Google 地图商店定位器的全部内容.您可能还想查看每个网站所有者都应该使用的免费 G​​oogle 工具列表.