Styling googlemap infowindow

Anvil Q&A
1

I’d like to style the background of an infowindow conditionally. I’ve figured out how to apply the style to the content form of the infowindow but not to the window itself. Here’s a sample app that shows the issue.

Basically, I want the entire infowindow background to have the color.
https://anvil.works/build#clone:OKDYD57UA5JIAROO=HVKP3QNLCNY2IIKQ2RGE3ARW

1 Like
2

I looked into it and thought that self.background=properties['color'] would work but unfortunately I still see the white border.

Possibly CSS needs to involved somehow.

3

I agree. Setting the background-color of the .gm-style-iw-c class does the trick but I don’t see how to do that conditionally from python

4

Getting dirty with JS …

If you changed the pop up form to be a custom html form, you could add some jQuery in a function inside the html property to modify the css for that class (remember to use !important).

Call it on demand using call_js(), passing the required colour as a parameter.

Will need some playing, but that should work in the absence of any built in Anvil way.

5

Thanks David. I’ll look at that. I think I asked somewhere else about converting forms into a custom html. type. If I start with a custom html form, I can switch the html template any time but I don’t see how to change a form into a custom after the fact.

6

Hmm, not sure you can without playing with ‘git’. Not something I’ve any experience with, sorry.

7

Struggling to get it to work. Looks like the form events don’t seem to fire (eg Show).

Might take a look tomorrow with a fresh head.

8

I can style “bits” of the pop up (in yellow), but the right side and bottom are left untouched :

image

And I cannot get the form to fire the “show” event…

9

But how? What is the procedure to do so?

10

Found a solution for changing the background.

Go to theme.css and add the following to the bottom of the file

.gm-style .gm-style-iw-d::-webkit-scrollbar-track, 
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-t::after { 
  background: red;
}

The background of the info window will now be red.

Source:
https://stackoverflow.com/questions/37456627/how-to-change-the-infowindow-background-color