Remove address bar on google maps iFrame

Question

I have been trying to do this for a while with no result, can anyone tell me a way to hide the address bar on a this google maps iFrame?

I have tried to hide it in our css using display:none; and this works when I inspect the element and change it there but whenever I add it into our css it just isn't having it!

<iframe src="https://www.google.com/maps/d/embed?mid=1bJn0zvKIJibY51hlco4ZbOBGek4" width="640" height="480"></iframe>

this is the class for it, and when I change this here it works and no address bar is there but changing it in our style sheet wont change it.

we are using wordpress if thats and consolation.

the only code used is its embedded on our site, this seems to be a common question on the web — James Clapson, Oct 17 '16 at 12:29
I meant that you should update your question, providing code to demonstrate what you have tried so far. It seems you are calling this via an iframe, which the called app does not know or care about your CSS, as it does not use it. This is why you're able to hide the top bar via developer tools but not in code. — IronAces, Oct 17 '16 at 12:32
ahh i see, thanks for that. is there any way to style iframes in css? or is this a lost cause ? — James Clapson, Oct 17 '16 at 12:35

score 0 · Accepted Answer · answered Oct 17 '16 at 14:27

0

Due to some policy crap you can't change the CSS of an iframe which domain isn't the same as your website is... But try integrate the Google map with JavaScript. Here's the Google reference: https://developers.google.com/maps/documentation/javascript/adding-a-google-map Good luck :)

answered Oct 17 '16 at 14:27

Tobias Glaus

3,008
3
18
37

thanks man but ive managed to change it with a div, and editing the size of it. here is how for anyone else – James Clapson Oct 17 '16 at 14:34
'

' – James Clapson Oct 17 '16 at 14:35

Remove address bar on google maps iFrame

1 Answers1