hide top bar in embedded google map

Question

I have an embedded Google Map on a webpage. I had to use a map attached to a gmail account because I'm using multiple locations.

The map has a partially opaque bar at the top, that I'd like to get rid of. Each time the map is loaded, the bar has a different (unique) class, so I can't easily hide it using CSS.

I even tried some jQuery, because the sibling before it always has the class of .gm-style so I tried this:

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

but that didn't work.

Is there some easy way that I'm missing to hide that bar?

Answer 1

you cant hide the topbar where the name its and you can no longer use the top-30px since they trimming the button part i guess google find out. but you can use the clipping create a div and place you iframe in it give it an id and add a css to it.

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

Answer 2

You cannot hide the toolbar. But you can use this code below to make it disappear by tweaking with the height and width of what can be viewed.

<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>

You can tweak with the " top:-30px; " to add spacing or move it up or down based on what the actual set value is.