如何在 WordPress 中添加响应式谷歌地图
已发表: 2018-02-28无论您要去哪里，Google 地图都会为您指明方向。 在城市中导航时，能够立即获得方向变得至关重要。 作为最受欢迎的地图解决方案，将 Google 地图添加到您的 WordPress 网站再简单不过了。 这种用户友好的地图技术将提供您选择的位置的商业信息、联系信息和方向，使您的用户导航超级方便。
准备好向您的 WordPress 网站添加地图了吗？ 有几种不同的方法可以添加一个，手动和使用插件。 让我们从DIY方法开始。
请记住：您永远不应该在实时站点上进行更改。 我们免费的本地开发应用程序 Local 将帮助您简化工作流程并安全地试验您的网站。 今天就试试吧！
手动添加谷歌地图
嵌入地图
添加和嵌入地图是您将实际地图显示在页面上的方式，它只需要几个简单的步骤。 如果您只有一个（或几个）要添加到您的站点，则手动添加地图是可行的方法。
1. 前往谷歌地图并输入位置。
2. 单击搜索按钮。
3. 选择“分享”（右侧的选项）。
4. 复制嵌入代码，确保在复制前全部选中。
在 WordPress 中添加地图
为了添加地图，您需要编辑帖子或页面。 添加地图的好地方是联系页面或任何谈论用户可能需要查找的特定位置的帖子。
5. 转到帖子 > 添加或页面 > 添加。
6. 打开 HTML 编辑器（在文本模式下）并将嵌入代码粘贴到您希望地图出现的任何位置。
7. 根据您的喜好选择保存草稿、更新或发布。
如果您查看该页面，您应该会看到您的地图。 如果地图未显示，请务必仔细检查整个嵌入代码是否已复制并粘贴到编辑器中。
使地图响应
在使用地图时这是可选的，但为您的查看者提供最佳用户体验是一个好主意。 用户在寻找路线时通常在旅途中，因此此响应式地图在他们使用移动设备时会很有帮助。
您可能已经注意到粘贴到编辑器中的iframe中有一个宽度和高度测量值 - 您需要进行一些调整以使地图响应。 一些简单的 CSS 就可以解决问题； 所需要的只是嵌入代码周围的一个额外的div标签。 使用类responsive-map使您的代码现在看起来像这样：
<div class="responsive-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
添加 CSS
将这些 CSS 属性添加到您的样式表是最后要做的事情。 当然，您可能希望根据您的页面设计稍微调整一些内容。
.responsive-map{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
就是这样！ 通过这些简单的代码添加，您将在您的网站上拥有一个响应式地图。 不确定是否要走DIY路线？ 现在让我们来看一个简单的插件解决方案。
使用此 CodePen 查看所有代码！
使用 MapPress Easy Google 插件添加地图
当只有几张地图时，手动嵌入地图是一种不错的方法，但如果必须添加很多会发生什么？ 例如，一个商业网站可能有多个需要显示的位置。 单独添加每个地图可能会有点乏味。 这是一个插件派上用场的地方。 有很多不错的选项可供选择，但 MapPress Easy Google Maps 是一个值得一试的选项（以及我将在本教程中使用的选项）。
首先，您需要在您的 WordPress 网站上安装并激活 MapPress Easy Google Maps。
插件设置
您会注意到管理侧边栏中的插件设置菜单，并且您还会注意到 MapPress 附带了许多选项，使其成为适用于任何站点的灵活解决方案。 地图类型、缩放、边框、对齐方式、控件等可以在这里轻松调整。
添加地图
同样，为了添加地图，您需要编辑帖子或页面。
1. 转到帖子 > 添加或页面 > 添加。
2. 向下滚动到编辑屏幕上的 MapPress 部分，然后选择“新地图”。
3. 您将看到 MapPress 编辑器，您可以在其中输入地图地址。 即使您没有确切的地址，请尝试输入该位置的名称，它应该会为您找到它。 如果您想分享您的位置，“我的位置”链接将允许插件自动检测您的位置。
4. 为您的地图添加标题并选择地图大小。
注意：地图宽度可以在地图编辑器或简码中指定为百分比，使其对移动设备友好。 高度通常保持固定。 如果您更喜欢将高度和宽度添加到简码，它看起来像这样： [mappress map width="100%" height="400"]
5. 点击“保存”，然后点击“插入帖子”。 该地图现在将在您的帖子中。
6. 更新或发布您的帖子以查看地图。
这些提示和技巧应该为您的网站的 Google 地图集成提供一些指导和见解。 无论是手动添加地图还是使用插件添加地图，为您的用户提供现成的地图将帮助他们到达正确的位置。
在本地测试它！
请记住：您永远不应该在实时站点上进行更改。 我们免费的本地开发应用程序将帮助您简化工作流程并安全地试验您的网站。 今天就试试吧！
本文最初于 2016 年 2 月 2 日发布。最后更新于 2018 年 2 月 14 日。