如何将谷歌地图添加到 WordPress

在网页中加入交互式地图可以帮助客户了解我们，今天我们就来介绍如何将 Google 地图添加到 WordPress 网站中。

在本文中，我们向您介绍一款 Otter Blocks 插件，这是一款非常适合初学者的 Google 地图工具。它可以帮助我们将 Google 地图添加到 WordPress 网站。

Otter Blocks 谷歌地图插件

要将 Google 地图添加到 WordPress 网站，最简单的方法是使用 Otter Blocks 插件，而且该插件是免费的。

主要特征：

• 自定义地图的许多元素，包括位置、缩放级别等等。
• 通过配色方案和其他选项设置您的地图样式。
• 向您的地图添加多个位置和标记。
• 轻松组织地图库。

如何将 Google 地图添加到 WordPress（分 3 步）

现在，我们向您介绍如何为 WordPress 网站创建地图。首先，需要像安装其他插件一样，在 WordPress 网站上安装 Otter Blocks 。然后，按照以下步骤将 Google 地图添加到 WordPress。

第 1 步：将您的 Google Maps API 密钥添加到 WordPress

安装 Otter Blocks 后，仪表板的“设置”选项卡下将有一个名为 Otter 的新菜单。当访问它时，应该会看到一个可以输入Google Maps API 密钥的输入框，在开始创建地图之前需要添加该地图 API。

要获取 Google Maps API 密钥，请访问 Google API 仪表板。如果已经有一个 Google 帐户，直接使用已有账户登录仪表板即可。

在 Google API 仪表板中，选择页面顶部附近的蓝色创建项目按钮：

在下一个屏幕上选择创建。然后，为项目输入一个名称。

再次单击创建按钮，将会返回仪表板。

选择屏幕顶部附近的启用 API 和服务。

然后，在 API 库中搜索“Google Maps JavaScript API”，或者直接在下面的地图区块中选择“Maps JavaScript API”。

打开 Maps JavaScript API 后，点击启用按钮。

点击左侧菜单中的“凭据”，然后再从

在下一个屏幕上，单击页面上方的“创建凭据”按钮。

点击后从弹出菜单中选择“ API 密钥”，将看到一个 API 密钥，复制该密钥待用。

返回 WordPress 站点并将密钥粘贴到 Google Maps API 密钥框中。

保存更改然后就可以创建地图了。

第 2 步：创建新地图

通过上面的步骤，我们就将 Otter 配置完成了。当我们在古腾堡编辑器中添加块的时候，就能够看到 Otter 提供的很多块，从其中选择 Google Maps 块。

要做的第一件事是选择添加标记按钮。这样可以在地图上指定的位置放置标记。可以给标记一个标题，为其选择一种样式，然后输入一个地址。

在文本框中，还可以添加和格式化用户单击标记时将显示的文本：

之后，使用地图构建器中的其他一些选项开始自定义地图。让我们逐个地浏览每个选项卡。

定位和缩放

要为地图设置特定的缩放级别和位置，可以放大和缩小示例地图并将其拖动到想要的任何位置。在编辑器中设置后的效果就是最终在网站上的显示方式。

还可以更改地图类型，包括地形、卫星、道路或混合地图。

控件

在控件部分，可以决定用户可以使用哪些类型的选项。这包括他们是否可以拖动地图以及是否有街景选项。

风格

在样式部分，可以调整地图的外观。还可以从多种预定义的地图样式中进行选择，甚至可以创建自己的样式。

第 3 步：将地图放在网站上

地图调整到符合要求后，不要忘记保存它。完成后，会在页面上看到它以及用于调整宽度、更改样式或删除地图的按钮。

点击发布，谷歌地图就显示在网站的前端了：