求助：移除嵌入网站的Google Maps顶部黑色栏

嘿，我明白你现在被嵌入的Google Maps顶部那个带名字的黑色栏烦透了，咱们来搞定它！

首先得说清楚：你之前尝试的JavaScript代码之所以失效，是因为浏览器的同源策略在搞事情——Google Maps的iframe属于google.com域名，和你的网站域名不一样，浏览器会禁止你直接操作跨域iframe内部的DOM结构，所以往iframe的head里追加样式的操作根本执行不了。

给你两个可行的解决方案：

方案1：用CSS容器裁切隐藏（快速生效） #

给iframe套一个带overflow:hidden的容器，通过偏移iframe来把顶部黑色栏移出可视区域，具体代码如下：

<div style="width: 100%; height: 250px; overflow: hidden; position: relative;">
  <iframe 
    id="newiframe" 
    src="https://www.google.com/maps/d/embed?mid=1HtXJoNB0yb5t8HRnt5spDguSxknoV-I&amp;hl=en&amp;ehbc=2E312F" 
    width="100%" 
    height="280px" 
    allowfullscreen="allowfullscreen"
    style="position: absolute; top: -30px;"
  ></iframe>
</div>

• 容器的高度和你原本想要的地图高度保持一致（250px），设置overflow:hidden来裁切超出部分
• 把iframe的高度调大30px（对应黑色栏的大致高度），再通过top: -30px让iframe向上偏移，这样顶部的黑色栏就会被容器裁切掉
• 如果黑色栏高度不是30px，你可以微调top和iframe的height数值来适配

方案2：调整Google My Maps的分享设置（更优雅） #

如果不想用裁切的方式，你可以回到你的Google My Maps项目里：

• 打开你的地图项目，点击顶部的「分享」按钮
• 在分享设置里，找到「嵌入地图」的选项，看看有没有隐藏标题/顶部栏的开关或者设置
• 有些版本的Google My Maps允许你在生成嵌入代码时移除顶部的标题栏，这样生成的iframe本身就不会带那个黑色栏了，这是最理想的解决方式

记住哦，跨域场景下直接操作iframe内部DOM的方法是行不通的，别再纠结之前的JS代码啦，上面的两种方法都能帮你解决问题。

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