Dynamically resize Google Maps without Custom HTML?

Anvil Q&A
1

Hey all, not a proficient coder, but do understand Python decently enough so I chose Anvil to prototype a tool for bedside nurses. I’ve problem solved successfully for many of the programming issues but am hung up on what most of you will probably know right away. I have a Google Maps Form which renders onto the main page successfully, and I can set a height in properties, but I want to make the map dynamically resizing to get rid of scroll bars on side (plus be mobile friendly).

I’m trying to do it in Anvil without resorting to custom HTML. I was able to get animate.css styles to work by referencing external CSS in native libraries and changing roles based on events, but any time I attempt to change the map role in the same way based on the custom CSS I got from the Google Maps API page nothing seems to happen. I kinda get that normally with custom HTML pages in the I’d need to set

and then create a JS function which calls the map into the ‘map’
but I was hoping to avoid that because I’m actually enjoying coding/learning with Python and I don’t have a ton of time to dig in to JS at the moment.

Getting more comfortable editing the themes.css so is there a way to create a role like ‘.map’, and then when my Map() form is called, initialize it and add a role with something like self.map_1.role = ‘map’ ?

Thanks for looking

2

Figured out how to assign roles via the role panel.

I created a role ‘map-canvas’ in the Themes section of the App sidebar and then following the ‘A Guide to Styling Apps with CSS’ guide, in theme.css added entry for .anvil-role-map-canvas with these values.

.anvil-role-map-canvas {
width:100%;
height:100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 0;
}

Also had to insert one line below into the existing nav-holder class. This prevents the map-canvas class from overlaying the nav-holder and hiding the left navigation pane underneath it.

.nav-holder .left-nav, .left-nav-placeholder {
z-index: 2
}

Still need to figure out how to get the bottom of map to resize with window. Will update when I can figure that out.

1 Like
3

Figured it out!