正在寻找一种在您的网站上嵌入WordPress谷歌地图内容的方法？

与WordPress中的许多内容一样，您可以通过几种不同的方式在您的网站上嵌入Google地图，具体取决于您要包含的地图内容类型。

在这篇文章中，我们将首先向您展示如何在没有插件的情况下在WordPress中添加Google地图。然后，我们会推荐一些可以帮助您嵌入Google地图的插件，以及采用这种方法的一些好处。我们还将深入探讨如何正确使用现在需要的Google Maps API。

现在需要Google Maps API

截至2018年6月11日，Google地图现在需要API密钥。如果您已经在自己的网站上实施了Google地图并且它已不再有效，那可能就是原因。或者更确切地说，您错过了API密钥。好消息是，对于99％的人来说，它应该仍然是免费的。以下是Google Maps API定价。

Google还会每月为您的结算帐户提供200美元的经常性信用额度，以抵消您的使用费用。因此，除非您生成数千个请求，否则您在网站上使用Google地图不应该花费任何费用。

还有什么变化？没什么，但如果您想在WordPress中使用Google地图，现在需要执行以下操作：

1. 注册Google Cloud Platform Console帐户并进行配置。
2. 添加您的结算信息，即使您可能不会被结算。
3. 将API密钥添加到您的Google Maps嵌入代码或插件设置中。

如何获取Google Maps API密钥

以下是有关如何获取Google Maps API密钥的步骤。

步骤1

转到Google云端平台控制台。如果您还没有帐户，请创建一个帐户，它是免费的。

第2步

选择或创建项目。

第3步

设置结算帐户。即使他们要求您将信用卡存档，也不应该向您收费，除非您确实超过了高使用限制。

第4步

您将被要求选择一种或多种产品。这取决于您正在使用的地图类型。例如，如果您在没有插件的情况下在WordPress网站上嵌入地图（如下面的步骤所示），那么您将选择Google Maps Embed API。

如果您使用的是Google Maps Widget等  插件（如下面的步骤所示），那么您可以选择Google Maps Static API。

如果您使用的是第三方插件或主题，则应提供有关他们使用的Google地图部署类型的文档。不用担心，您可以随时添加多种类型并在以后更改这些类型。

第5步

点击“启用”。

第6步

单击“API”，然后在“凭据”下，您将看到您的API密钥。

第7步

如果您只是嵌入Google Maps API密钥，它将在源代码中以纯文本格式显示。因此，您应该对此进行限制，否则，人们可以在他们的WordPress站点或项目上使用您的API密钥并占用您的使用量。

要执行此操作，只需单击您的API密钥的名称，它将允许您添加限制。对于您的WordPress网站，只需添加HTTP引荐来源即可。如https://yourdomain.com/*。这将允许它只在您的网站上拨打电话。

如何在没有插件的情况下在WordPress中添加谷歌地图

如果您只想嵌入一个简单的地图而不需要更详细的功能，例如自定义位置标记或其他注释，则可以使用您每天使用的普通Google地图网站在没有插件的情况下嵌入Google地图。

这是它的工作原理……

第1步：复制Google地图嵌入代码

要开始使用，请使用Google地图网站创建要嵌入的地图。

例如，如果要嵌入地点标记，请在Google地图中打开该地点。或者，如果要嵌入路线，请在Google地图中打开路线。

获得要嵌入的地图后，单击左上角的汉堡菜单：

在菜单项列表中，选择“ 共享”或“嵌入地图 ”选项：

这将打开一个共享弹出窗口。在该弹出窗口中，单击“ 嵌入地图”选项卡。

然后，您可以使用下拉菜单选择所需的尺寸。对于大多数WordPress网站，默认大小效果很好，但如果需要，您可以使地图变大或变小。

完成后，单击“ 复制HTML”按钮复制嵌入代码：

然后，您需要将API密钥添加到代码中。所以你的代码应该是这样的：

<iframe src =“https://www.google.com/maps/embed/v1/search?key= YOUR_API_KEY＆parameters allowfullscreen> </ iframe>

第2步：将Google地图嵌入代码添加到WordPress网站

现在，您需要做的就是将嵌入代码添加到要包含地图的帖子或页面中的WordPress网站。

如果您正在使用随WordPress 5.0发布的新WordPress Gutenberg块编辑器，您可以通过添加自定义HTML块并将嵌入代码粘贴到块中来实现。不要忘记添加API密钥。

您可以通过单击块上方的“ 预览”按钮来预览地图的外观。

如果您仍在使用经典的TinyMCE编辑器，则可以通过打开“ 文本”选项卡并粘贴代码来添加Google Maps嵌入代码：

添加代码后，您可以返回“ 可视”选项卡查看地图的实时预览。

就是这样！您刚学会了如何在没有插件的情况下在WordPress中添加Google地图。

使用Google我的地图在没有插件的情况下嵌入更复杂的地图

如果您希望在多个位置标记，自定义注释等内容方面获得更多创意，您仍然可以在不需要使用Google的“我的地图”服务的插件的情况下实现这一目标。

我的地图是Google的官方工具，可让您创建和共享自己的自定义地图。有了它，您可以创建类似下面的示例，其中包含许多自定义标记和用户单击标记时显示的自定义信息：

以下是如何使用它将自定义Google地图添加到WordPress。

第1步：在Google我的地图中创建地图

要开始使用，请访问Google我的地图并创建新地图。从那里，您可以使用地图构建器界面来构建地图：

虽然我们不会详细介绍它，但是这个界面可以让你构建一些非常有创意的地图。为了更深入地了解，Google的这篇帮助文章涵盖了许多重要功能。

第2步：生成嵌入代码

完成地图构建后，需要生成嵌入代码。

但是，在获得该代码之前，首先需要公开您的地图。为此，请单击“ 共享”按钮。然后，在弹出窗口中单击更改 …：

然后，在Web上选择On – Public并单击Save：

完成后，点击地图标题旁边的下拉菜单，然后选择在我的网站上嵌入以生成实际的嵌入代码：

这将打开一个带有代码的弹出窗口，您应该复制它。不要忘记添加API密钥。

第3步：将嵌入代码添加到WordPress站点

现在，您可以将嵌入代码添加到WordPress网站，就像您从常规Google地图网站获得的嵌入代码一样。

如果您不确定如何操作，请单击此处跳转到上面教程的该部分。

请改用WordPress谷歌地图插件

除了上面的手动方法，还有大量的WordPress谷歌地图插件，可以帮助您在您的网站上嵌入地图。

您可能需要考虑其中一个插件而不是手动方法，这有几个原因：

• 它们允许您使用简单的界面创建更复杂的地图。
• 无需离开WordPress仪表板即可完成所有操作。
• 其中一些链接到WordPress。例如，您可以将地图标记链接到WordPress帖子。
• 其中一些可以帮助您优化Google地图的性能（稍后将详细介绍）。

对于所有这些插件，您需要先生成自己的Google Maps API密钥，然后才能开始嵌入地图。本教程将向您展示如何执行此操作。

谷歌地图小工具

Google Maps Widget是一个简单的Google Maps插件，可让您使用Google Maps Static API嵌入地图，该API通过嵌入静态图片而非交互式地图提供更加性能友好的方法（我们将在下一节）。

如果你想要简单轻巧的东西，这是一个很好的选择。激活后，您需要获取Google Maps API密钥  并将其插入插件的设置中。您可以将Google地图添加到您网站上的任何小部件区域。然后，访问者可以在灯箱中打开更大的交互式地图版本：

如果需要，您还可以立即使用交互式地图，Pro版本允许您使用短代码在您网站的任何位置嵌入地图。

Google Maps Easy

Google Maps Easy可帮助您使用自己的标记和注释创建自定义地图。

添加标记时，您可以上传自己的自定义图标，在标记描述中包含文本和图像等等。您还可以控制地图的功能，例如选择是否让用户放大：

构建地图后，可以使用短代码或PHP函数嵌入地图。

INTERGEO

Intergeo是另一种流行的选项，可让您使用自定义标记创建自己的地图，并控制地图功能。

安装并激活插件后，您就可以直接从WordPress仪表板构建地图了：

然后，您可以使用短代码将它们嵌入到您网站的任何位置。

Gutenberg Block for Google Maps Embed

Gutenberg Block For Google Maps Embed是一个简单的插件，可为新的WordPress Gutenberg块编辑器添加专用的Google Maps块。

使用此块，您可以嵌入任何地址并选择：

• 外形尺寸
• 缩放级别
• 交互式地图与静态地图（再次，后一种方法有助于提高性能）

它不会让你创建自己的自定义地图 – 但如果你使用新的块编辑器并且想要一个简单的方法来包含一些简单的地图，它是一个方便的选择。

谷歌地图可以减慢你的WordPress网站 – 不要让它

虽然谷歌地图允许您通过其交互式地图为您的网站嵌入大量酷炫功能，但存在性能折衷，因为它需要加载大量脚本来支持所有交互功能。

简而言之，嵌入互动式Google地图可能会降低您的网站速度。

有几种方法可以解决这个问题。

首先，如果您不需要人们能够以交互方式浏览您网站上的地图，那么在没有任何第三方工具的情况下加快速度的简单方法是：

• 获取要在您的网站上使用的地图的屏幕截图
• 将该屏幕截图链接到Google地图网站上的地图，或者在用户点击时打开带有交互式地图的灯箱弹出窗口。

这样，您的网站只是加载常规图片 – 而不是所有与Google地图相关的脚本。

作为手动执行此操作的替代方法，您还可以使用免费的AWEOS Google Maps iframe加载每次点击插件。此插件会自动将Google Maps嵌入替换为通用占位符图像。然后，如果用户点击“ 加载地图”按钮，它将加载完整的Google地图嵌入：

或者，您也可以使用Google Maps Static API，它返回没有任何JavaScript的常规图片。一些Google Maps插件 – 包括Google Maps Widget和Gutenberg Block For Google Maps Embed – 允许您在创建地图时使用Static API。

但是，我们意识到有时这种静态方法不会削减它，并且很多人希望立即嵌入交互式Google地图体验。

如果是这种情况，加速谷歌地图的另一个好方法是使用延迟加载。通过延迟加载，您的网站将等待加载任何低于谷歌的Google地图嵌入，直到访问者开始向下滚动页面。这可以让您的初始页面加载速度更快，同时仍然可以嵌入交互式Google地图内容。

我们已经写过如何延迟加载图片和视频，这与Google地图的想法相同。

有一些插件可以让你这样做。例如，a3 Lazy Load插件允许您延迟加载iframe嵌入，其中包括Google Maps：