yuvalsab yuvalsab - 1 month ago 22
Javascript Question

Google Maps causes horizontal scroll on mobile

I'm using Google Maps JavaScript API (v3) to display two maps on my website. When viewing the this page on mobile (Asus Zenfone 2 with Chrome), I see a blank page that is caused by an unwanted huge horizontal scroll - and it's the map's fault. When I remove the map from the code, there is no horizontal scroll. When I use

overflow: hidden
on the map's container, or even the
<body>
- the scroll is still there. Even when I use
display: none
on the map's container, I still have this annoying scroll.

Any suggestions on how I keep this map in mobile view, and get rid of this scroll?

Answer

Turns out the map generates a span at the end of <body>. The fix was simple:

body > span {
    display: none;
}`