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 do not want it 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 map bar. It is about customizing the html code with which the iframe is inserted.
After trying it, it looks like a ñapa, but it is the best I have found and, as Google My Maps does not offer anything better, I share them here. In any case, if you know 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 are going to suggest me to use display:none in the bar class, and it has worked for you in WordPress, you will make me very happy, because I have not achieved it and it is the first one that occurred to me.
Insert 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 is an option that indicates Insert into my site.
Once we click, a pop-up appears with an HTML code that we must copy. Basically it is an iFrame that we will insert into our website. If it’s WordPress, we’ll do it with an HTML block.
This code usually has this structure approximately:
<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 (whenever we are in WordPress), and paste this code into it.
The result when we preview the block or when we show the web is basically the Google My Maps map with the well-known top bar that bothers us so much.
Since we have put ourselves in context. How can we hide this bar? As we have previously advanced, 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 are going to do is start from this code, which I have taken from this question asked in 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 analyze this code:
In line 1 we create a div tag to which a style is applied, where the height is defined, a border is applied, we tell you to show it within the line with a defined height and width (display: inline-block), and finally we indicate that what on the cut (overflow: hidden).
In 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 him to place it in a position relative to his 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.
What happens is that the stackoverflow example is not quite correct, at least as in what its parameters indicate, and I had to adjust it a little, being as follows:
<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 in line 2 how much margin I have to raise the map to hide the bar, in this case -30px was insufficient, and I have been better off with -60px.
Once this amount is found out, in line 1 we will establish as height the total height of the iFrame minus the margin that we have cut in line 2. 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 bar of the noses.
Hide the Google My Maps bar using CSS (not working for me)
The other ñapa that has occurred to me 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 is 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 administration 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 indistinctly display: none or visibility: hidden.
The result will be exactly the same (in theory because, as I say, it has not worked for me).
Try it in any case and, if it works for you, I will be happy for you to tell me how you have done it and so I can complete this article.
One of the sources where I have tried a possible solution has been this, in which the CSS code with Javascript is added, but I have not managed to make it work either.
Anyway, Google My Maps still has some things that can be improved, but it is a very affordable free service and the closest thing I know to a GIS (without being it). While it is not one of the most evolving within Google products.