Custom Google Map theme styling (non-default colors)

kullus · January 10

Hello,

I would like to customize the Google Map on our website so it matches our design instead of using the default Google colors or be grey like here: https://themes.muffingroup.com/be/carcosmetics/contact/

I’ve seen other templates using custom code to apply themed map styles (colors, contrast, layout). Could you please advise how this can be implemented?

I am using Advanced Map, url: https://visitant.veebilahendus.ee/kontakt/ pw: 12345

Best regards

Steve

Phil · January 12

Hi,

To adjust the styles of the map, you must use https://snazzymaps.com/, and put the code of the style you need in the Styles area of the Map Advanced:

Best regards

kullus · January 12

Hi,

It seems that I can’t simply copy and paste the code, as the map breaks. Could you please add the code for WY and Ultra Light with Labels?

Steve

Phil · January 12

Are you sure that you copied and pasted the entire code? It should start with [ and end with ].

I have checked the styles you mentioned, and they work for me:

Best regards

kullus · January 12

can you paste the code here?

Phil · January 12

Unfortunately, the code is too long to fit in the message.

Best regards

kullus · January 14

Hi,

Please send an e-mail with it to: [email protected]

Phil · January 14

I do not handle the mailbox, so unfortunately, I am not available to send it.

Anyway, let's try this way:

snazzy-wy.txt

Best regards

kullus · January 14

Hi,

That worked like a charm — thank you very much!

One more question: the Contact Box is currently displayed at the top. How can I move it below the other content?

Best regards,

Steve

Phil · January 14

Try the following CSS code:

.section.full-width .wrap.one .column_map.one .google-map-contact-wrapper{
 top: unset;
 bottom: 120px;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

kullus · 12:03PM

Excellent, thx!

Custom Google Map theme styling (non-default colors)

Comments

This website uses cookies