您想将 Google 地图商店定位器添加到您的 WordPress 网站吗?
商店定位器是指向您的营业位置的地图。如果您经营本地企业,它将帮助您的用户在地图上找到您、获取行车路线并共享您的位置。
在本文中,我们将向您展示如何在 WordPress 中轻松添加 Google 地图商店定位器。
![如何在 WordPress 中添加 Google 地图商店定位器(免费选项) 如何在 WordPress 中添加 Google 地图商店定位器(免费选项)](https://www.wpbeginner.com/wp-content/uploads/2019/04/how-to-add-google-maps-store-locator-in-wordpress-og.png)
为什么在 WordPress 中添加 Google 地图商店定位器?
许多 WordPress 用户运营着 为特定城镇或地区提供服务的小型企业网站。这包括餐馆、房地产经纪人、管道工、维护服务提供商、小商店、沙龙等企业。
将 Google 地图商店定位器添加到您的网站将有助于您的用户找到您。他们将能够获取前往您商店的行车路线并与朋友分享位置。
它还可以帮助提高您网站的搜索引擎可见度并吸引更多网站访问者。
让我们看看如何在您的WordPress 网站上添加 Google 地图商店定位器。我们将向您展示免费和付费方法及其优缺点,然后您可以选择最适合您需求的一种。
方法 1:向 WordPress 添加简单的商店定位器(免费)
此方法免费且简单,因为它不需要创建 Google 地图 API 密钥的额外工作。建议想要添加商店位置的简单地图的用户使用。
首先,您需要 在计算机上访问Google 地图网站。接下来,在搜索字段中输入您商店的地址,Google 地图将通过固定标记将其显示在地图上。
![在 Google 地图中搜索您的商店位置 在 Google 地图中搜索您的商店位置](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorsearchgooglemaps.jpg)
确保标记放置在正确的位置。您可以通过单击右下角的缩放按钮来选择缩放级别。
一旦您对地图的外观感到满意,您需要单击左栏中的共享按钮。这将弹出一个弹出窗口,您需要在其中切换到“嵌入地图”选项卡。
![选择 Google 地图的嵌入地图选项 选择 Google 地图的嵌入地图选项](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorembedamap.jpg)
您现在将在地图上看到带有 HTML 代码的搜索位置。您应该单击“复制 HTML”链接来获取嵌入代码。
现在前往 WordPress 网站的管理区域,编辑要在其中显示商店定位器地图的帖子或页面。
通常,用户会在联系表单页面上添加商店定位图, 其中包含公司电话号码和营业时间。
在帖子编辑屏幕上,您需要添加“自定义 HTML”块。
![将自定义 HTML 块添加到您的页面 将自定义 HTML 块添加到您的页面](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorcustomhtmlblock.png)
您应该将从 Google 地图复制的代码粘贴到“自定义 HTML”块的文本区域中。
您现在可以预览页面以查看嵌入到页面中的 Google 地图。它将显示您在地图上标记的商店位置,并提供用于获取路线或保存位置的链接。
![嵌入式 Google 地图预览 嵌入式 Google 地图预览](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatormethod1preview.png)
此方法适用于快速嵌入 Google 地图,但它不会给您带来最大的 SEO 好处。换句话说,它不会帮助您排名更高并从搜索引擎或 Google 地图搜索获得更多流量。
如果您是一家小型企业、餐馆或 在线商店 ,拥有一个或多个实体地点,那么我们建议您使用下一个解决方案来提高您的本地 SEO 排名。
方法 2:使用本地 SEO 添加商店定位器(推荐)
Google 上近 46% 的搜索都具有本地意图。多合一 SEO (AIOSEO) 是 市场上最好的 WordPress SEO 插件,可帮助您从搜索引擎为您的网站带来更多免费流量。
借助 AIOSEO,您可以使用架构标记输入商店位置、联系方式和营业时间,以便信息显示在搜索引擎结果页面上。
例如,当您在 Google 上搜索“佛罗里达州的麦当劳位置”时,您将看到包含不同目的地的特色片段以及带有固定位置的地图。
![Google 上的多个位置地图预览 Google 上的多个位置地图预览](https://www.wpbeginner.com/wp-content/uploads/2022/05/multiple-location-map-preview-on-google.png)
这将有助于提高您 网站的 SEO 排名并提高您的搜索点击率。
注意:您至少需要AIOSEO Plus计划才能访问本教程所需的本地 SEO 功能。
首先,您需要安装并激活 AIOSEO for WordPress 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南 。
激活后,该插件将运行设置向导。如果您需要配置插件方面的帮助,请查看我们关于如何为 WordPress 设置 AIOSEO 的指南。
![AIOSEO 设置向导 AIOSEO 设置向导](https://www.wpbeginner.com/wp-content/uploads/2021/11/aioseo-setup-wizard.png)
设置过程完成后,您需要转到 WordPress 仪表板上的“多合一 SEO”»“本地 SEO” 。
您可以单击“激活本地 SEO”按钮开始配置本地设置。
![在 AIOSEO 中激活本地 SEO 在 AIOSEO 中激活本地 SEO](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorenablelocalseo.png)
接下来,您需要单击本地 SEO页面顶部的“地图”选项卡。
在“地图”页面上,您应该会看到“API 密钥”字段。
![粘贴您的 Google 地图 API 密钥 粘贴您的 Google 地图 API 密钥](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorpastegooglemapsapikey.png)
您可以通过访问Google 地图平台并使用您的 Google 帐户登录来获取 Google 地图的 API 密钥。
之后,您应该单击“开始”按钮。
![欢迎使用 Google 地图平台 欢迎使用 Google 地图平台](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorgooglemapsplatformgetstarted.png)
Google Cloud 资源按项目组织。如果您还没有项目,系统会自动为您创建一个项目。
请注意,您需要为项目启用计费才能使用 Google Maps API。然而,您不太可能支付任何费用。
地图嵌入请求是免费的,可以无限制使用,如 Google 文档中所述,并且您每月还会获得 200 美元的信用额度。
您需要点击“创建计费帐户”按钮。
![为您的项目启用计费 为您的项目启用计费](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorenablebilling.png)
您现在将看到“帐户信息”页面。您应该从下拉菜单中选择您所在的国家/地区并同意服务条款。
准备好后,单击“继续”按钮。
![同意 Google 地图服务条款 同意 Google 地图服务条款](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatortermsofservice.png)
现在您需要选择现有的付款资料或创建新的付款资料。
该个人资料适用于个人或企业,包括个人或企业的名称、付款方式和地址。
![开始你的免费试用 开始你的免费试用](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorpaymentinformationverificatin.png)
输入该信息后,您需要单击“开始我的免费试用”按钮。
不用担心“免费试用”的措辞。即使免费试用期结束,地图嵌入请求仍然免费,并且在您手动升级到付费帐户之前,永远不会向您的信用卡收取费用。
您可能还会被要求填写一份 30 秒的业务调查,以确保您获得最相关的信息。
![您可能会被要求填写 30 秒的调查 您可能会被要求填写 30 秒的调查](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorwelcomesurvey.png)
当您点击“提交”按钮时,您的 Google 地图 API 密钥将会显示。您需要将此密钥输入到方法 2 和 3 的插件设置中。
然后,您可以点击“您的 API 密钥”字段末尾的“复制到剪贴板”图标。完成此操作后,只需点击“转到 Google Maps Platform”按钮即可关闭弹出窗口。
![复制您的 API 密钥 复制您的 API 密钥](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorcopyapikey.png)
限制您的 Google 地图 API 密钥
我们建议您限制密钥,使其不能被其他人使用。
创建 API 密钥后,Google 将显示“保护您的 API 密钥”弹出窗口,您可以在其中限制您的密钥,使其只能在您自己的网站上使用。
在“选择限制类型”下拉列表中,您需要选择“HTTP 引荐来源网址(网站)”。然后在下一个字段中,您应该 使用模式在“新项目”字段中 输入您的网站域名*example.com/*
。
![保护您的 API 密钥 保护您的 API 密钥](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorprotectapikey.png)
您应该会看到一条消息:“已成功限制您的 API 密钥。” 现在,该密钥仅适用于嵌入在您的特定网站上的 Google 地图。
返回您的网站,您应该在字段中输入您的 API 密钥。接下来,您可以向下滚动以编辑地图设置。
AIOSEO 允许您使用 Gutenberg(WordPress 编辑器)块、 短代码、 小部件或 PHP 代码显示 Google 地图。它还允许您选择不同的地图样式并向地图添加自定义标记。
![编辑地图设置 编辑地图设置](https://www.wpbeginner.com/wp-content/uploads/2013/10/edit-map-settings.png)
对于本教程,请确保选择“古腾堡块”设置。完成后,不要忘记单击“保存更改”按钮。
现在您可以创建商店定位图。如何做到这一点取决于您的企业是只有一家商店还是多个地点。
为单个位置添加地图
如果您的企业在单一物理位置运营,则地图将使用您在 All in One SEO 的“位置设置”页面上提供的信息。
现在继续并切换到“多合一 SEO”»“本地 SEO”页面的“位置”选项卡。
由于您只有一个物理位置,因此应确保“多个位置”选项设置为“否”。
![将多个位置设置为否 将多个位置设置为否](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatormultiplelocationsno.png)
接下来,您应该向下滚动到“业务信息”部分,并填写尽可能多的有关您业务的信息。
这很重要,因为当有人使用 Google 搜索或 Google 地图搜索您的商家时,可能会显示该信息。
![商家信息将显示在 Google 搜索中 商家信息将显示在 Google 搜索中](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatoraioseobusinessinfo.png)
之后,向下滚动到“地图”部分以固定您的确切位置。
只需在“输入查询”字段中输入您的地址即可。将在该位置添加一个图钉,如有必要,您可以通过将其拖动到新位置来移动该图钉。
![在地图部分中输入您的商店位置作为查询 在地图部分中输入您的商店位置作为查询](https://www.wpbeginner.com/wp-content/uploads/2022/09/storelocatoraioseoaddsinglelocation.jpg)
完成后,您需要滚动到页面顶部或底部,然后单击“保存更改”按钮来存储您的设置。
现在您可以将商店定位器地图添加到任何 WordPress 帖子或页面。首先,只需在您的网站上编辑或添加新帖子或页面即可。
进入 块编辑器后,单击顶部的“+”按钮,然后在页面上的任意位置添加“AIOSEO Local – Map”块。完成后请务必单击“更新”或“发布”按钮。
![将 AIOSEO 本地地图块添加到您的页面 将 AIOSEO 本地地图块添加到您的页面](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatoraioseolocalmapblockonelocation.png)
恭喜,您已成功将 Google 地图商店定位器添加到您的网站。
添加多个位置的地图
要添加不同位置的地图,您需要导航到“多合一 SEO”»“本地 SEO”页面的“位置”选项卡。到达那里后,您需要单击“多个位置”的“是”选项,然后单击屏幕顶部的“保存更改”按钮。
![将多个位置设置为是 将多个位置设置为是](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatormultiplelocationstoggle.png)
保存更改后,您会注意到新的位置自定义帖子类型已添加到管理侧边栏。您将在此处输入您的营业地点。
继续导航到 位置 » 所有位置 ,然后单击“添加新位置”按钮。
![添加新位置 添加新位置](https://www.wpbeginner.com/wp-content/uploads/2013/10/add-a-new-location.png)
这将带您进入位置编辑器。您需要为要添加的位置添加标题,例如商店或城镇的名称。
现在,您应该向下滚动到页面的帖子内容下方的“AIOSEO 本地业务”部分。
请确保输入尽可能多的信息,因为当有人在 Google 搜索或 Google 地图中搜索您的商家时,可能会显示这些信息。
![填写业务信息部分 填写业务信息部分](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatoraioseobusinessinfomultiple.png)
之后,您应该找到“地图”部分并在“输入查询”字段中输入您的地址。
该位置将显示一个图钉。
![添加多个地图位置 添加多个地图位置](https://www.wpbeginner.com/wp-content/uploads/2013/10/add-multiple-map-locations.png)
在地图上输入您的位置并添加位置信息后,继续并单击“发布”按钮。
您现在可以重复此步骤并添加其他营业地点。
完成后,您可以使用 WordPress 编辑器中的“AIOSEO Local – Map”块将商店定位器地图添加到网站上的每个位置。
![将 AIOSEO 本地地图块添加到您的页面 将 AIOSEO 本地地图块添加到您的页面](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatoraioseolocalmapblockmultiple.png)
现在您需要选择要在地图上显示的位置。
为此,请查看屏幕右侧的块设置窗格,然后从“位置”下拉菜单中选择您想要显示的商店。
![从设置窗格的下拉菜单中选择商店位置 从设置窗格的下拉菜单中选择商店位置](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatoraioseolocalmapblocksettingsmultiple.jpg)
只需为任何其他位置添加额外的本地地图块即可。不要忘记单击页面顶部的“发布”或“更新”按钮以在您的网站上显示地图。
方法 3:在一张地图上显示多个商店位置
前两种方法可让您添加具有单个位置的商店定位器地图。如果您有多个位置,则需要为每个位置添加单独的地图。
或者,您可以使用我们的第三种方法在单个地图上显示多个位置。
您需要做的第一件事是安装并激活Locatoraid Store Locator插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后,您需要访问Locatoraid » 配置并设置插件。
在“Google 地图”选项卡中,您需要粘贴 Google 地图 API 密钥。您可以按照上述方法二的方法来创建。
然后您需要单击“保存”图标来存储密钥。您应该注意到,Google 地图能够在“地图样式预览”窗口中正确加载。
![粘贴您的 Google 地图 API 密钥 粘贴您的 Google 地图 API 密钥](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorlocatoraidgooglemapsapikey.png)
接下来,您可以访问“配置”选项卡并选择是否在地图上显示英里或公里。
您还可以检查其他选项,例如地址格式、您希望在地图上显示的详细信息以及哪些用户可以使用该插件。
![配置您的地图,包括您希望使用的单位 配置您的地图,包括您希望使用的单位](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorlocatoraidconfiguration.png)
一旦您对插件的设置感到满意,请确保单击“保存”按钮来存储您的设置。
现在您已准备好添加商店位置。您应该导航至Locatoraid » Locations。到达那里后,您需要单击“添加新”按钮。
![单击位置页面上的添加新按钮 单击位置页面上的添加新按钮](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorlocatoraidaddnewlocation.png)
这将带您进入“添加新位置”页面。您可以在此处输入商店名称、位置和其他详细信息。
完成后,您应该单击页面底部的“添加新位置”按钮。
![填写您商店的地址和其他信息 填写您商店的地址和其他信息](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorlocatoraidaddnewlocationpage.png)
您将进入“编辑位置”页面,您可以在地图上查看商店位置。
如果一切看起来都不错,那么您应该单击屏幕顶部的“<位置”按钮以返回仪表板中的Locatoraid » 位置页面。
![确认地图正确,然后单击“位置”按钮 确认地图正确,然后单击“位置”按钮](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorlocatoraideditlocationpage.png)
您可以通过单击“添加位置”按钮并重复这些步骤来添加更多位置。
创建所有商店位置后,您可以将地图添加到您的网站。
只需添加或编辑页面,然后单击蓝色的“+ 添加块”图标即可。您应该将简码块拖到页面上,然后在字段中输入简码。 [locatoraid]
![将简码块添加到您的页面 将简码块添加到您的页面](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorlocatoraidshortcodeblock.png)
此默认短代码适用于大多数网站。但是,您可以使用不同的短代码自定义地图。访问Locatoraid » 发布页面了解更多信息。
现在您可以发布或更新页面并访问您的网站以查看您的商店定位器地图。
您的所有商店位置都将显示在同一张地图上。如果您的用户输入他们的地址或单击“定位我”链接,那么他们就可以找到最近的商店并获取路线。
![具有多个位置的 Locatoraid 地图预览 具有多个位置的 Locatoraid 地图预览](https://www.wpbeginner.com/wp-content/uploads/2019/04/storelocatorlocatoraidpreview.png)
我们希望本教程可以帮助您了解如何在 WordPress 中添加 Google 地图商店定位器。您可能还想了解如何创建免费的企业电子邮件地址或查看我们为您的网站提供的最佳人工智能聊天机器人列表。