Hide Google Map Top Bar Embedded Header

Sometime we need to use Google custom map, although its so easy to create a google map. People use it for several purpose if someone need to add multiple map marker with a map or create custom color. we can do it easily by using google map creator. First of all need to go to google map maker to create a new map.

add-a-place

After add a place on the map, can add a custom map marker and and customize the zoom level, select map color etc.

last and hard thing are Hide Google Map Top Bar Embedded Header. but it can be solve easily by CSS.

<div style="height:400px; width:100%; display:inline-block; overflow:hidden;">
<iframe class="custom-google-map" style="position:relative; top:-50px; border:none;" src="https://source-fo-the-map.com" width="What Ever Width" height="445"></iframe>
</div>

 

 

18 thoughts on “Hide Google Map Top Bar Embedded Header”

    1. Hello,
      sorry for late reply. you need to add the style to your style.css or CSS files. also you can use the style to your theme here
      Appearance=> Customize=> Additional CSS
      Add the css there.

      Thanks

      1. Thank you very much!

        I want to embed my map on my website, but I don’t want everyone to be able to take my map and embed it on other websites. I want the map to be public, but just on my website. So I am going to use your code to hide the share icon. Is this the best way to do this, or can you think of a better way?

        Thank you

  1. Thanks for the article,
    but here are one visual problem with this workaround.
    When we click on an icon and automatically open the left side panel, there are missing the top of the panel, usually one pictures top part.
    I’cant fix it : (
    Do you have some idea?

Leave a Comment

Your email address will not be published. Required fields are marked *

0 Shares
Tweet
Share
Pin
Share