Google map styling

I’m trying to style a google map on a client’s site. However, it’s like the website doesn’t even see the styles.

You can see the dev site here.

I’m trying to make that bar above the map dark blue.

You can see these styles showing up in the style sheet
http://bluepinehomes.staging.wpengine.com/wp-content/themes/bluepinehomes2016/Custom.css

.i4ewOd-pzNkMb-haAclf {
background-color: rgb(17, 58, 105) !important;
}

However, when you inspect the element with the google chrome inspector tools you don’t even see the style appearing and getting overriden.

Any suggestions?

You forgot the link to the actual page. I think this is the one you meant: http://bluepinehomes.staging.wpengine.com/contact-us/

The map is inside an iframe, and unless I’m missing something here, there is no way to style content in an iframe which pulls content from a third-party site.

Yes I believe you will need to use the Map API instead which is a bit more involved than just throwing in an Iframe.

1 Like

Just a thought, but wouldn’t inline styles inside the <iframe> tag work? I believe I did this once on a site that was pulling in suggestions of book titles from Amazon.

No unfortunately you can’t access content in an iframe unless you have access to both iframes (on the same domain) and then with js use post message to communicate between the two. Both must be set up with scripts to send and receive. Which in most cases is irrelevant as you could then just style the iframe content at source anyway.

An iframe is just a window to another site and you can’t style other peoples sites.

1 Like

Thanks that is the right page. I’m thinking I will have to use the api.

I’ve looked at the maps api some and I’m still not certain this can be changed.

It’s just a custom map.

I came across this post.

https://productforums.google.com/forum/#!topic/maps/rL3ecfO1UFo

Actually I’m still calling bullshit on this. There has to be some way to change it through the API.

I think that’s just for embedded maps in an iframe.

If you use the API then I believe you can build your own header into it. However, I have never tried this so don;t know how feasible it is unfortunately.

Probably too late to be of help to @BrianBam, but I’ve just discovered https://www.openstreetmap.org. They apparently place no restrictions on what you can do with their maps - and their embedded maps have no header in any colour.

Might be worth knowing for future reference.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.