无Google API密钥，如何移除WordPress+Elementor中Map iframe顶部黑条？

方案1：替换为普通Google Maps嵌入链接 #

你当前用的是Google My Maps的嵌入地址，顶部黑栏是My Maps自带的控件栏。换成普通Google Maps的嵌入链接即可解决：

1. 打开Google Maps搜索目标地点
2. 点击「分享」→「嵌入地图」，复制生成的iframe代码
3. 将这段代码替换到Elementor的HTML组件中，新代码不会带有顶部黑栏

示例普通嵌入代码格式：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.219815093914!2d-73.98542868468017!3d40.74881707932804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a70d4f554b%3A0x2910855c54786245!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1699999999999" width="640" height="480" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

方案2：用CSS裁剪隐藏黑栏（保留原My Maps链接） #

如果必须使用当前的My Maps链接，通过容器裁剪隐藏顶部黑栏：

<div style="width:640px; height:480px; overflow:hidden; position:relative;">
  <iframe src="https://www.google.com/maps/d/embed?mid=1lpxvIAeOhsxqMqQ2GrFNzonnDCmZe6o&ehbc=2E312F&z=17&hl=en" width="640" height="520" style="position:absolute; top:-40px; border:0;"></iframe>
</div>

• 原理：给iframe套一个固定尺寸的容器，设置overflow:hidden
• 调高iframe的高度，通过top:-40px向上偏移，把顶部黑栏移出容器可视区域
• 可根据黑栏实际高度调整top和iframe的height数值（比如黑栏高30px，就设top:-30px，iframe高度设为480+30=510px）

方案3：使用Elementor内置地图组件 #

Elementor自带的Google Maps组件，部分地区无需API Key也能加载基础地图：

• 在Elementor编辑器中添加「Google Maps」组件
• 在设置面板输入地点名称/坐标，调整尺寸
• 直接预览发布，若能正常显示则可替代iframe，避免黑栏问题

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