隐藏包含Google地图的嵌入式iframe的边框

Question

背景

Google地图有一个默认边框，出于审美原因，我不希望在我们的网站上显示。

目的

我想要摆脱它或隐藏它。

代码

到目前为止，我所做的是删除嵌入代码中的默认高度和宽度。然后添加一个较小的包装，以便嵌入将延伸到它之外而不显示。

在Inspect Element中我看到边框是1px。但只是将<iframe> 2px放大并将-1px定位在外面并不足以将其删除。所以我最终做了102％，但它并不像我想的那么精确。在这一点上，它是功能性的，没有人会真正注意到，但它是一个“临时解决方法”

HTML

<div class="map-footer-wrap">
  <iframe src="https://mapsengine.google.com/map/embed?mid=zIn_bb78zyjU.kVqzAS1cS9qg" border="0"></iframe>
</div>

CSS

.map-footer-wrap {
  height: 400px;
  overflow: hidden;
  position: relative
}

.map-footer-wrap iframe {
  width: 102%;
  height: 102%;
  position: absolute;
  top: -1%;
  left: -1%;
}

Answer 1

只需使用frameborder="0"代替border="0"即可让谷歌地图边框消失。