如何移除Google Maps嵌入iframe中显示两点位置及更多选项的信息框

方法1：通过URL参数调整（官方适配，无兼容性问题） #

Google Maps Embed API 提供了专用的隐藏参数，你只需在原有iframe的src地址末尾追加对应参数即可实现需求：

• 追加&hide_route_labels=1：隐藏路线起止点文字标签和对应信息浮层
• 追加&disable_default_ui=1：隐藏更多选项菜单、默认操作控件

修改后的完整代码如下：

<iframe frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?origin=rishra&destination=kolkata&key=MY-API-KEY&zoom=12&hide_route_labels=1&disable_default_ui=1" allowfullscreen></iframe>

注意：请将代码中的MY-API-KEY替换为你自己的有效API密钥；如果不需要隐藏缩放等操作控件，仅保留&hide_route_labels=1参数即可

方法2：CSS裁切方案（适配所有嵌入场景） #

如果参数调整后仍有残留信息元素，或你使用的是旧版嵌入规则，可以通过外层容器裁切的方式隐藏顶部信息区域，完整代码示例如下：

<style>
.custom-map-wrapper {
  width: 100%;
  height: 550px; /* 可自定义实际显示高度 */
  overflow: hidden;
  position: relative;
}
.custom-map-wrapper iframe {
  position: absolute;
  /* 向上偏移量可根据信息框实际高度调整，一般40-70px即可完全覆盖信息框高度 */
  top: -65px;
  left: 0;
  width: 100%;
  /* 高度补全偏移量，避免底部地图内容被裁切 */
  height: calc(100% + 65px);
  border: none;
}
</style>
<div class="custom-map-wrapper">
  <iframe frameborder="0" src="https://www.google.com/maps/embed/v1/directions?origin=rishra&destination=kolkata&key=MY-API-KEY&zoom=12" allowfullscreen></iframe>
</div>

内容的提问来源于stack exchange，提问作者SIDDHARTH GUPTA