如何在WordPress中制作带有多个引脚的Google地图

已发表: 2025-07-23

将地图添加到您的网站上可以帮助您的访问者轻松找到您的业务或活动位置。如果您的业务有多个位置,则可能需要在同一地图上显示所有位置。在这里,在Google地图上使用多个引脚可能会有所帮助。

如果您的网站是使用Elementor构建的,则不必在Google Map上添加多个引脚时要麻烦。相反,您可以轻松地添加尽可能多的东西。即使对于初学者来说,这个过程也很简单。

在这篇文章中,我们将介绍有关如何在WordPress中使用Elementor制作多个引脚的Google地图的详细教程。但是在此之前,我们将介绍几句话,以了解WordPress网站上有多个引脚的Google Maps。

为什么在WordPress网站上使用Google地图与多个引脚

Why Use Google Maps with Multiple Pins on Your WordPress Site

使用多个引脚使用Google地图可以在许多方面改善您的网站。这不仅仅是展示位置。它可以帮助用户建立信任并使您的网站更有用,因为他们可以轻松找到您的商店。这是您应该考虑的一些主要原因。

1。在一个地方显示所有位置

如果您的业务有多个分支机构,商店或办公室,则多个引脚可以帮助您在单个地图上显示它们。这使访问者更容易看到每个位置,而无需在不同的地图或页面之间切换。

2。帮助用户找到最近的位置

当用户在一个地图上看到所有位置时,他们可以很快找到最接近他们的位置。这可以改善他们的经验,并帮助他们更快地采取行动,例如参观您的商店或预约预约。

3。节省访客的时间

您可以在纯文本中列出每个地址,而是可以用销钉显示它们。这为您和您的访客节省了时间。它还使您的网站看起来更专业和现代。

4。带位置数据的Boost本地SEO

Google Maps可以帮助您网站的本地SEO。当您在地图中添加真实地址时,它会告诉搜索引擎有关您的业务位置。这可能有助于您的网站出现在本地搜索结果中。探索如何使用Happyaddons改善本地SEO。

Boost Local SEO with Location Data

5。使您的网站更具互动性

带有多个引脚的地图看起来更具交互性和动态性,而不是纯文本。访问者可以放大,单击引脚并探索地图。这使您的网站更具吸引力和用户友好。

6。非常适合基于服务或多支分支的业务

如果您经营一系列餐厅,诊所,商店或交货点,多个引脚可以清楚地解释您的覆盖范围。如上所述,这建立了信任并帮助用户选择最近的位置。

与Elementor一起制作带有多个引脚的Google地图的先决条件

让我们在一开始就清楚一件事。 Elementor确实有一个名为Google Map的内置小部件。但是它的功能非常有限。您不能使用此默认小部件向地图添加多个引脚。因此,为此,您需要附加插件。

一个不错的选择是Happyaddons 。它提供了一个名为Advanced Google Maps的小部件,该小部件可让您轻松地创建并在地图中添加多个销钉,而无需任何麻烦。

因此,总共需要本教程上的网站上的以下工具。

  • Elementor
  • Happyaddons
  • Happyaddons Pro

需要HappyAddons Pro ,因为高级Google Map是该插件的高级小部件。在您的网站上安装并激活它们后,开始按照下文开始遵循教程。探索Happyaddons的所有其他小部件。

如何在WordPress中制作带有多个引脚的Google地图:分步教程

在本节中,我们将逐步解释如何使用Elementor和HappinAddons插件制作带有多个引脚的Google地图。我们将使用必要的屏幕截图进行装饰,以便您了解完整的过程。继续阅读!

步骤01:打开页面并找到高级的Google Map小部件

打开要使用多个引脚创建Google地图的帖子或页面。在Elementor面板上查找Advance Google Map小部件将其拖放到Elementor帆布上。

Use the Advanced Google Map widget to create multiple pins

步骤02:获取Google API密钥

将小部件添加到画布中后,您将要求配置用于显示Google地图的凭据。要开始,请单击面板上“一般设置”部分下的凭据选项。

Get credential for the Advanced Google Map

您将被带到网站后端的HappyAddons的凭证部分。查找Google Map选项。然后,点击GET API密钥选项。

Get Google Map API Key

您将来到Google Cloud页面。

Google Cloud Page

现在,您必须找到“地图JavaScript API”。为此,在搜索框中键入JavaScript API 。出现该选项后,单击它

Find Maps JavaScript API

进入MAPS JavaScript API页面后,启用该选项

Enable Maps JavaScript API

同意并继续按钮。在此之前,您可以选择您的国家。我们为我们的情况模糊了。

Configure JavaScript Account

Google API密钥在技术上不是免费的。您必须完成帐单信息才能获取API。

注意(免费):尽管在技术上不是免费的,但您将获得相当于每月200美元的代币。有了这个令牌,您的Google地图可以加载或查看多达28,000次。只有在越过此视图/负载限制时,您的卡才会被充电。

Complete the billing information

之后,将为您提供弹出窗口。您必须提供有关将使用此地图的一些信息。完成后,单击弹出窗口右下角的提交按钮。

Fill in your industry-related information

Google Map API密钥将通过新的弹出窗口立即出现在您的屏幕上。复制API键

Copy the Google Map API key

回到HappyAddons Google API密钥选项,然后在那里粘贴代码点击末尾的“保存更改”按钮。

Paste the Google Map API key to HappyAddons

现在,来到您的Elementor帆布,刷新/重新加载它。 Google地图将出现在画布上。

Google map appears on the Elementor Canvas

检查如何使用Elementor在WordPress中创建时间表。

步骤03:向地图添加多个引脚

默认情况下,在地图上仅显示一个引脚。要在地图上添加并显示更多引脚,请在面板上展开地图标记部分。

Expand the Map Marker section on the panel

扩展地图标记部分后,您可以通过单击+添加项目按钮来添加任意数量的销钉。

Add more pins to the Google Map

现在,通过放置纬度和经度的值,您可以精确地设置每个位置的销钉。

Add latitude and longitude to pins on Google Map

步骤04:配置地图设置

以同样的方式扩展地图设置部分。

Configure Map Settings

您将在本节中找到很多选择。

Mag Settings options of the Advanced Google Map widget

现在,您可以通过开关切换以查看它们的工作方式来探索每个选项,以便您最终可以陪伴着适合设计需求的选择。

了解如何在WordPress中创建自动滚动图像库。

步骤05:样式化高级Google地图小部件

完成所有设置和内容部分时,请进入“样式”选项卡。从这里,您可以自定义高度,宽度,边界类型,边界半径和更多选项。

Stylize the Advanced Google Map Widget

以同样的方式,还可以扩展其他选项,并在您想更改引脚的外观时进行必要的自定义。

Stylize the other options of the Advanced Google Map widget

步骤06:预览设计

设计完成后,在在线发布之前,请预览它,以查看是否需要进行任何校正或修改。您可以看到,在下面附加的视频剪辑中,小部件在我们的末端正常工作。

因此,您可以在WordPress中使用Elementor制作带有多个引脚的Google地图。

带有多个引脚的Google Map的高级提示

一旦在Google地图中添加了多个引脚,您可以做更多的事情,使该地图对访问者和网站更好。这些高级技巧将帮助您使地图看起来更专业,改善用户体验,甚至支持您当地的SEO工作。

Advanced Tips for Google Map with Multiple Pins

1。使用自定义图像代替图标

而不是默认的红色引脚,请尝试使用每个位置的自定义图标或图像。 HappyAddons允许您从Content Tab> MAP标记部分进行此操作。自定义图像和图标可以使您的地图在视觉上更清晰和吸引人。

2。缩放和中心设置

调整地图的缩放水平和中心,以正确显示所有销钉。如果某些引脚相距很远,请确保缩放水平足够宽,以便在地图加载时可见所有。这为用户提供了完整的概述,而无需手动移动地图。

3。使其移动友好

始终检查您的地图在移动设备上的外观。确保它快速加载,可单击销钉,并且在小屏幕上可以读取信息框。在台式机和移动设备上效果很好的地图将使更多的用户满意。

4。在接触或位置页面上嵌入地图

不要只是将地图留在一页上。您可以通过将其嵌入在其他页面上,例如“联系我们”,“我们的位置”或“访问我们”页面来重复使用同一地图。这可以帮助用户在您网站上的任何地方找到正确的位置。

了解如何使用Elementor在WordPress中创建动态网页。

结论

用多个引脚制作Google地图可能是您网页设计中的一个简单步骤或一部分,但是它可能会有持久的印象。它不仅可以帮助访问者找到您的位置,还可以提高本地SEO分数并使您的网站看起来更专业。

在Elementor和Happyaddons插件的帮助下,您可以轻松地将它们添加到您的网站中,而无需麻烦。这是如此简单,即使是初学者也可以通过遵循上面涵盖的教程来做到这一点。如果您仍然有任何问题,请通过下面的评论框告诉我们。

我们很快就会通过可行的答复与您联系。感谢您与我们在一起,直到最后。让我们知道您希望我们在下一篇文章中介绍哪个主题。