Responsive Maps

Most embeddable maps are touch friendly in that you can swipe/scroll to reposition the map within their frame. This is great, but users can get stuck if the embedded map happens to fill a viewport at any given time. If there’s no piece of the actual page in site, there’ll be nothing to touch or swipe from.

Test this on a small touch screen. Unless you channel all your swiping mojo, you won’t be able to scroll to the bottom of the page.

This is most common with single column mobile views where containers occupy 100% of the viewport’s width. To avoid this, I’ll usually set the container closer to 90%. This provides rails on the right and left sides that ensure there’s always part of the page to swipe. I also try and keep the map’s height short. Maybe something like this: