Map element is not responsive to changes in screen dimensions caused by screen rotation

I noticed that one of the pages on my site was not reacting as it should when the screen was rotated on mobile.

This is how it looks in portrait.

This is how it looks when you rotate the screen.

This is how it should look when you rotate the screen.

I couldnt figure out the cause so re-built the page element by element whilst rotating the screen after each change to identify the cause. Turns out it the page works as expected with no map, but with a map it stops the whole page reacting to the screen rotation.

Does anyone know how to stop this from happening?