使用或不使用插件嵌入WordPress谷歌地图指南

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

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

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

最后，我们将以在WordPress上使用Google地图的一些性能注意事项结束，并分享一些关于如何保持WordPress网站快速加载的提示，即使您确实需要嵌入Google地图。

您可以单击下面直接跳转到特定部分或通读整个内容。

• 现在需要Google Maps API
• 如何在没有插件的情况下在WordPress中添加谷歌地图
• WordPress谷歌地图插件为您提供更大的灵活性
• 谷歌地图性能效果及提升性能的小技巧

现在需要Google Maps API

自2018年6月11日起，Google地图现在需要API密钥。如果您已经在您的网站上实施了Google地图，但它不再工作，这可能就是原因。或者更确切地说，您缺少API密钥。好消息是，对于99%的人来说，它仍然应该是免费的。以下是Google Maps API定价。

谷歌地图API定价

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

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

1. 注册一个Google Cloud Platform Console帐户并进行配置。
2. 添加您的帐单信息，即使您可能永远不会被收费。
3. 将API密钥添加到您的Google地图嵌入代码或插件设置中。

如何获取Google Maps API密钥

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

第1步

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

第2步

选择或创建一个项目。

第3步

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

第4步

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

谷歌地图嵌入API

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

如果您使用第三方插件或主题，他们应该有关于他们使用哪种类型的 Google 地图部署的文档。不用担心，您始终可以添加多种类型并在以后更改它们。

第5步

点击“ENABLE”。

启用谷歌地图API

第6步

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

谷歌地图API密钥

第7步

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

为此，只需单击您的API密钥名称，即可添加限制。对于您的WordPress网站，只需添加一个HTTP引荐来源网址就足够了。比如https://yourdomain.com/*。这将允许它只在您的网站上拨打电话。

Google Maps API密钥限制

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

如果您只想嵌入简单的地图并且不需要自定义位置标记或其他注释等更详细的功能，则可以使用您每天使用的普通Google地图网站嵌入Google地图而无需插件。

这是它的工作原理……

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

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

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

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

如何访问嵌入代码

在菜单项列表中，选择Share or embed选项：

打开嵌入选项

这将打开一个Share弹出窗口。在该弹出窗口中，单击Embed a map选项卡。

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

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

谷歌地图嵌入代码

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