Dynamically change height for responsive Google Maps!

I’ve had a heck of a time trying to use some of the forum examples which use custom HTML and Javascript and just discovered an incredibly easy way to dynamically change the height of my Google Map front page to keep it fullscreen when a user resizes the window.

You do NOT need to create a custom HTML page. This quick guide is for another total noob who may be as lost in the sauce as I was.

STEP 1: Create your blank page, lets call it Form1
STEP 2: Drag a column panel in.
STEP 3: Copy and paste the below css into themes.css

.anvil-role-map-canvas {
position: fixed;
top: 0px;
left: 0px;
z-index: 0

STEP 4: In the Themes panel of the Designer Sidebar, open Roles, go to the bottom and add role ‘map-canvas’
STEP 5: Assign the column panel you dragged into the blank page the role ‘map-canvas’
STEP 6: Drag in a Google Map component (the name will likely be map_1)
STEP 7: In the properties section under Events, the ‘show’ event type map_1_show
STEP 8: Add the following to what’s already in your code

from anvil.js import window

def map_1_show(self, **event_args):
self.map_1.height = window.innerHeight
anvil.js.window.addEventListener(‘resize’, self.resize_map)

def resize_map(self, *args):
self.map_1.height = window.innerHeight

This was so much cleaner than setting a script into a custom HTML. Some of the solutions were making my head spin because I don’t know Javascript. So for any other newbies who need to do something from a resize event, here ya go!


Finally got around to trying this out in my own project, and it is indeed a much cleaner way to achieve this, than what I had before.

Thanks you sharing!