Google map layout (full page map - height responsiveness)


I would like to build a page layout similar to google map:

  • On the right a map that takes the full screen’s height
  • A left panel that scrolls if its content is longer than the screen’s height
  • Unlike google map I would also have a header

I tried to put the map in a floating group aligned relative to the top and bottom of the page. But when the user’s screen is small my floating group gets a vertical scroll that I don’t want… I would need the map to adapt to the screen’s height but after reading several posts on this forum I doubt this is possible…?

Having the map’s floating group only aligned relative to the top is not sufficient, because if the map extends below the bottom of the screen, I loose the zoom buttons. Also, for some features I need to play with the map’s center address. If the whole map doesn’t fit in the screen, the map’s center will not coincide with the middle of the map as viewed by the user.

So, does anyone know how to get a full-page map on every screen size and without scrolling (and with the right “map’s center address”) ?

Many thanks!

Were you able to solve this? I am looking to do the exact same thing :slight_smile:


Guys now that the ID attribute is exposed I believe you can your this post and modify it to meet your needs

Did anyone have success with the javascript idea? Couldnt make it happend. Bubble map plugin have “Keep proportions” checkbox, which kind of works, this would be an amazing feature to have to avoid plugins to fix it… :heartpulse: thanks for a great plugin anyway!!