如何裁剪Google Maps嵌入iframe以去除顶部黑条并保留原尺寸？

你嵌入的是Google My Maps的共享地图，顶部黑条是平台自带的控制栏，直接修改iframe参数没用的话，用容器裁剪是靠谱的解决办法，具体实现如下：

• 用一个div容器包裹iframe，给容器设置固定宽高（845px×684px），开启overflow: hidden和相对定位position: relative。
• 给iframe设置绝对定位，向上偏移黑条的高度，同时把iframe的高度增加对应偏移量，确保地图内容刚好填满容器。

具体代码示例：

<div style="width: 845px; height: 684px; overflow: hidden; position: relative;">
  <iframe 
    src="https://www.google.com/maps/d/u/0/embed?mid=1S9wPj5PsIDClLqPEiHWqtpNpm1mJECA&ehbc=2E312F" 
    width="845" 
    height="724" <!-- 原高度684 + 黑条预估高度40 -->
    style="position: absolute; top: -40px; left: 0; border: none;"
  ></iframe>
</div>

微调说明： #

• 如果40px的偏移量不对，你可以修改top的值（比如-35px或-45px），同时对应调整iframe的height（比如719或729），直到黑条完全被裁剪掉，地图内容刚好填满容器。
• 这种方式不会影响地图的交互功能，缩放、拖拽都能正常使用。

内容的提问来源于stack exchange，提问作者George Edmonds