Hide the top panel of the integrated google map

Question

I have a built-in Google Map on a web page. I had to use a map attached to my gmail account because I use several locations.

On the map there is a partially opaque bar at the top, which I want to get rid of. Each time a map loads, the panel has a different (unique) class, so I cannot hide it using CSS.

I even tried some kind of jQuery, because my brother always had a .gm-style class before it, so I tried this:

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

but it didn’t work.

Is there some simple way that I am missing to hide this bar?

Answer 1

You cannot hide the toolbar. But you can use this code below to make it disappear by adjusting the height and width of what you can view.

 <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 configure with "top: -30px;" to add an interval or move it up or down depending on the actual set value.