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

Question

我在网页上有一个嵌入式Google地图。 我不得不使用附加到Gmail帐户的地图，因为我使用了多个地点。

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

我甚至尝试了一些jQuery，因为之前的兄弟姐妹总是拥有.gm-style的类，所以我尝试了这个：

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

但这没有用。

我是否有一些简单的方法可以隐藏那个栏？

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;”调整以添加间距，或根据实际设置值向上或向下移动间距。

Answer 2

您无法隐藏其名称的顶部栏，并且您不能再使用顶部30像素，因为它们修剪了按钮部分，我想是Google知道的。但是您可以使用裁剪功能创建一个div并将iframe放置在其中，为其指定ID并为其添加CSS。

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

Answer 3

这很好用。可以结合js。

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