Styling of Google Maps Infowindow

Question

I love your theme and have purchased it for a few projects!

I am struggling to make a change that is most likely outside the scope of your theme here. But do you have an easy way to change the design of the infoWindow when clicking a map icon?

I am hoping that I just missed an example in your demos.

Thank you in advance.

SemiColonWeb · Accepted Answer

Hello,

Thank You so much for the Kind Words! :)

Google Maps infoWindow styling is currently not included with Canvas but we will definitely try including some styles for this in the upcoming updates. Meanwhile, you can consider styling the .gm-style-iw .gm-style-iw-c CSS Block to add your Custom Styling. Example:
[ch_pre type="css"].gm-style .gm-style-iw-c {
padding: 25px 13px 13px 25px !important;
}

.gm-style .gm-style-iw-c button {
top: 0 !important;
right: 0 !important;
}

.gm-style .gm-style-iw-c button img {
width: 18px !important;
height: 18px !important;
margin: 6px !important;
}[/ch_pre]

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

carabs · Answer

Thank you for the quick reply. This is a great start, and just about as far as I was able to get on my own. I have highlighted the 2 things I can not address with a green border in the image attached.

Again, I know this is beyond your theme scope ATM. But any information in future updates would really help!

Thanks again.

Semicolon Web · Answer

Hello,

Very Happy to Help!

This is the Scrollbar added by the default Google Maps styling. Simply consider using the following CSS Code:
[ch_pre type="css"].gm-style-iw-d {
overflow: auto !important;
}[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

carabs · Answer

This is great... thank you!

Semicolon Web · Answer

Very Happy to Help! :) Do let us know if we can help you with anything else.