Hi, I have the Google Maps added to my website, and all is working. How do I change the Google Map size at different screen width breakpoints (am not referring to zoom levels). The Google maps size is controlled by it’s properties width and height, which seem to be set as a global setting for all screen sizes?
I have tried overriding it with a class and using width and height values, but these seem to have no effect. Apologies if I missed the obvious, I am a new user of Wappler and a big learning curve ahead of me, but loving it so far
Hopefully someone has come across this before
I’m not able to test this at the moment but are you using Bootstrap for the page layout? If so, try setting the map width to 100% and then set the columns to different sizes for each breakpoint.
Yes I am using Bootstrap for the layout, had already tried dropping it in a column and trying to control the column sizing at breakpoints, which isn’t working. The Google Maps just spills over outside the column.
Guess am looking for a responsive element to the Google Maps
Hello,
You can use 100% for the width value 
this way the map will take 100% of the width of the element it’s placed in.
That’s what I suggested 
1 Like
Thank you for that, the 100% width setting did the trick, it now follows the column sizing.
What about the height?
Is there a way to set Google Map at different heights for different breakpoints?
Why does the width and height setting in a class selector attached to Google map have no effect?
Not sure about the height. You could maybe set it to a vh value so it’s a percentage of the screen height?
We applied style to the column by ID which works across devices. Dirty fix but works fine.
#GMap {
min-height: 100%;
width: 100%;
top: 10;
right: 10;
bottom: 10;
left: 10;
}
Something like that…
The class has effect only when width and height html values are set to empty string.
The root to my problem was not having it setup properly inside bootstrap column
Thank you all for your input.
1 Like