使用或不使用插件嵌入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密钥添加到代码中。所以你的代码应该是这样的：

第2步：将Google地图嵌入代码添加到WordPress网站
现在，您需要做的就是将该嵌入代码添加到您想要包含地图的文章或页面中的WordPress站点。
如果您使用的是随WordPress 5.0发布的新的WordPress Gutenberg区块编辑器，您可以通过添加自定义HTML块并将嵌入代码粘贴到块中来做到这一点。不要忘记添加您的API密钥。

如何在WordPress区块编辑器中添加嵌入代码
您可以通过单击块上方的预览按钮来预览地图的外观。
如果您仍在使用经典的TinyMCE编辑器，您可以通过打开“文本”选项卡并将代码粘贴到此处来添加Google地图嵌入代码：

如何在WordPress Classic编辑器中添加嵌入代码
添加代码后，您可以返回到Visual选项卡以查看地图的实时预览。
就是这样！您刚刚学习了如何在没有插件的情况下在WordPress中添加Google地图。
无需插件即可使用Google My Maps嵌入更复杂的地图
如果您想在多个位置标记、自定义注释等方面获得更多创意，您仍然可以做到这一点，而无需使用Google’s My Maps service的插件。
My Maps是Google的官方工具，可让您创建和共享自己的自定义地图。有了它，您可以创建类似于以下示例的内容，其中包含许多自定义标记和用户单击标记时显示的自定义信息：

Google’s My Maps示例
以下是如何使用它将自定义Google地图添加到WordPress。
第1步：在Google’s My Maps中创建您的地图
要开始使用，请前往Google’s My Maps并创建一张新地图。从那里，您可以使用地图构建器界面来构建您的地图：

Google’s My Maps界面
虽然我们不会详细介绍它，但此界面可让您构建一些非常有创意的地图。为了更深入地了解，谷歌的这篇帮助文章涵盖了很多重要的功能。
第2步：生成嵌入代码
完成地图构建后，您需要生成嵌入代码。
但是，在获得该代码之前，您首先需要公开您的地图。为此，请单击“Share”按钮。然后，单击弹出窗口中的Change…：

Google’s My Maps分享设置
然后，选择On – Public on the web并单击Save：

打开链接分享
完成后，单击地图标题附近的下拉菜单，然后选择在Embed on my site以生成实际的嵌入代码：

访问“My Maps”嵌入代码
这将打开一个包含代码的弹出窗口，您应该复制该代码。不要忘记添加您的API密钥。

My Maps嵌入代码
第3步：将嵌入代码添加到WordPress网站
现在，您可以将该嵌入代码添加到您的WordPress网站，就像您从常规Google地图网站获得的嵌入代码一样。
如果您不确定如何操作，请单击此处从上方跳转到教程的该部分。
改用WordPress谷歌地图插件
除了上面的手动方法之外，还有大量的WordPress Google Maps插件可以帮助您在您的网站上嵌入地图。
有几个原因，您可能需要考虑使用这些插件之一而不是手动方法：

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

对于所有这些插件，您需要先生成自己的Google Maps API密钥，然后才能开始嵌入地图。本教程向您展示了如何做到这一点。

谷歌地图小部件

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

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

Google地图小工具界面

如果需要，您还可以立即使用交互式地图，专业版允许您使用简码将地图嵌入网站的任何位置。

谷歌地图简单

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

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

谷歌地图简易界面

构建地图后，您可以使用简码或PHP函数将其嵌入。

Intergeo

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

安装并激活插件后，您将能够直接从WordPress仪表盘构建地图：

Intergeo接口

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

谷歌地图嵌入的古腾堡区块

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

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

• 方面
• 缩放级别
• 交互式地图与静态地图（同样，后一种方法有助于提高性能）

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

谷歌地图可以降低您的WordPress网站性能

虽然Google地图允许您通过其交互式地图将大量很酷的功能嵌入到您的站点中，但存在性能权衡，因为它需要加载大量脚本来支持所有这些交互式功能。

长话短说，嵌入交互式Google地图可能会降低您的网站速度。

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

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

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

这样一来，您的网站就只是加载了一张普通的图片——而不是所有与谷歌地图相关的脚本。

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

谷歌地图占位符图片

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

但是，我们意识到有时这种静态方法并不能解决问题，很多人希望立即嵌入交互式Google地图体验。

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

我们已经写过关于如何延迟加载图像和视频的文章，这与谷歌地图的想法相同。

有一些插件可以让你做到这一点。例如，a3 Lazy Load插件可让您延迟加载iframe embeds，其中包括Google地图：

延迟加载谷歌地图

其他选项包括：

• BJ Lazy Load
• Lazy Load by WP Rocket
• Easy Lazy Loader

小结

如果您只想在您的网站上嵌入一个简单的地图，您可以使用内置的嵌入代码功能将Google地图添加到WordPress，而无需使用插件。或者，您可以使用Google我的地图工具创建自己的自定义地图并将其嵌入。

除了这些手动方法之外，还有很多WordPress谷歌地图插件可以让您在不离开WordPress仪表盘的情况下进行大量控制。

无论您选择哪种方法，都要注意使用Google地图对性能的影响。尝试仅在绝对必要时使用Google地图，并考虑使用占位符图像或延迟加载等策略来减少对性能的负面影响。