Google My Maps is a great tool to create custom maps as if it were a GIS . But when we insert a map made with this tool on our website, a top bar appears that allows us to do some tasks and that, perhaps, we don’t want to appear. Here’s how to hide the top bar of Google My Maps, so you simply have a clean map to show your users.
I’ve basically found a way (that works) to hide this bar from the map. It’s all about customizing the html code with which the iframe is inserted.
After trying it, it looks like a bare, but it’s the best I’ve found and, since Google My Maps doesn’t offer anything better, I’m sharing them here. In any case, if you know of any other way to do it, I will be happy to receive your suggestions and thus expand this article with another more correct alternative.
Ah, if you’re going to suggest using display:none in the bar class, and it worked for you in WordPress, you’ll make me very happy, because I haven’t managed to do it and it’s the first one I came up with.
Embedding a Google My Maps map
The insertion of a map made with Google My Maps on our websites is very simple. Basically, when we go to the map menu, there’s an option that says Insert into my site.
Once you click, a pop-up appears with an HTML code that you have to copy. Basically, it’s an iFrame that we’ll insert on our website. If it’s WordPress, we’ll do it with an HTML block.
This code usually has this structure roughly:
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1AC_pkmvLCHtCtdGB5RETjPPjlOdLqfuL&ehbc=2E312F" width="640" height="480"></iframe>
Here we can modify the width and height of the created block.
The next thing, as we have said, will be to insert an HTML block (as long as we are in WordPress), and paste this code into it.
The result when we preview the block or when we show the website is basically the Google My Maps map with the well-known top bar that bothers us so much.
Since we’ve put ourselves in context. How can we hide this bar? As we have previously discussed, there are two methods. See.
Hide the top bar of Google My Maps by customizing the iframe code
One way to hide this bar is to customize the iFrame code offered by Google My Maps. To do this, what we’re going to do is we’re going to start from this code, which I’ve taken from this question asked on Stackoverflow.
<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>
First of all, let’s take a look at this code:
On line 1 we create a div tag to which a style is applied, where the height is defined, a border is applied, we tell it to show it within the line with a defined height and width (display: inline-block), and finally we tell it to trim what is left (overflow: hidden).
On line 2 we have the iframe itself, which differs from the one offered by Google My Maps in that we add style. We basically tell it to place it in a position relative to its normal position (position:relative), and we raise the map enough to hide the bar (top: -30px). Finally, here we remove the border (border: none). The rest remains the same.
The thing is that the Stackoverflow example is not quite correct, at least as far as its parameters indicate, and I had to adjust it a bit, looking like this:
<div style="height:420px; border:2px solid #eee; display:inline-block; overflow:hidden;" >
<iframe style="position:relative; top:-60px; border:none;" src="https://www.google.com/maps/d/u/0/embed?mid=1AC_pkmvLCHtCtdGB5RETjPPjlOdLqfuL&ehbc=2E312F" width="640" height="480"></iframe>
</div>
Basically, I had to define on line 2 how much margin I have to raise the map to hide the bar, in this case -30px was insufficient, and it was better with -60px.
Once this amount has been determined, in line 1 we will set the total height of the iFrame minus the margin that we have clipped in line 2 as the height . In my case it would be 480px – 60px = 420px.
In this way, as you can see, the map will be perfectly cropped and much more professional than with the nose bar.
Hide Google My Maps bar using CSS (it doesn’t work for me)
The other thing I’ve come up with is to hide the bar using CSS. This solution is simpler and seems just as botched to me, the problem is that, since we are trying to modify the CSS of an external element, it does not work (at least to me).
Basically, it’s about identifying the CSS class that corresponds to the top bar of the map and hiding it.
To do this, we will use the development tools that we can find in any browser.
In this way, with the inspector we can see what this class is and modify it from WordPress.
Once the class is detected, what we do is copy it, and we go to the WordPress admin panel. In Appearance > Customize we go to Additional CSS and there we add the property to which we are going to add the attribute that will allow us to hide the bar. In this case, we can use display: none or visibility: hidden interchangeably.
The result will be exactly the same (in theory because, as I say, it hasn’t worked for me).
Try it in any case and, if it works for you, I’ll be happy for you to tell me how you did it so I can complete this article.
One of the sources where I’ve tried a possible solution has been this one, in which the CSS code is added with Javascript, but I haven’t been able to make it work either.
Anyway, Google My Maps still has some things that can be improved, but it’s a very affordable free service and the closest thing I know to a GIS (without being one). Although it is not one of the most evolving within Google’s products.