完整指南：如何在 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 插件目录中最受欢迎的免费 G​​oogle 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 地图元素。