嵌入式谷歌地图中隐藏顶部栏

Question

我在网页上嵌入了一个Google地图。由于有多个位置需要使用，因此必须使用绑定到Gmail账号的地图。

地图顶部有一个部分透明的条形，我想要去掉它。每次加载地图时，该条形具有不同的（唯一的）类，因此无法轻松使用CSS隐藏它。

我甚至尝试了一些jQuery，因为它前面的同级元素总是具有.gm-style的类，所以我尝试了这个：

    $(function() {
        // hide google title bar on map
        setTimeout(function(){
                $(".gm-style").next().hide();                       
        },5000);                
    });             

但是那并没有起作用。

有没有什么简单的方法可以隐藏那个栏？

- Shawn

Answer 1

你无法隐藏工具栏。但是，您可以使用以下代码通过调整可查看内容的高度和宽度来使其消失。

<div style="height:160px; border:2px solid #eee; display:inline-block; overflow:hidden;">
<iframe style="position:relative; top:-30px; border:none;" 
      src=" Source to the map " 
      width="What Ever Width" height="What ever height"></iframe>
</div>

你可以通过调整 " top：-30px; " 来添加间距或根据实际的设定值上下移动它。

- Mohamed Islam

---

不再是-30像素，而是-46像素。 - Kyrbi

随着界面的演变，这些价值需要进行微调。 - htatche

不再是-46像素，而是-54像素。 - Luke

真不敢相信解决方案是通过 CSS，我试过用 JS 调整它，但没有成功，谢谢大佬。 - Ricky Orlando Napitupulu

不再工作 - Ramsha Khalid

Answer 2

您无法隐藏顶栏，其中包含名称，并且您不能再使用顶部30像素，因为他们修剪了按钮部分。我猜谷歌发现了这个问题。但是，您可以使用裁剪来创建一个div并将您的iframe放置其中，给它添加一个id并为其添加CSS。

 #div_id{
overflow:hidden;
    clip-path: polygon(0 10%, 100% 10%, 100% 100%, 0% 100%);
}

- GADI ROSALES

Answer 3

这段话的意思是：“这个很好用。你可以与js结合使用。”，其中包含HTML标记，不需要解释。

.hidemapbar {
  position: relative;
  clip-path: polygon(0% 12%, 100% 12%, 100% 100%, 0% 100%);
  top: -1em;
  border: inherit;
}

- Eren