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:
24 Responses
Leave a comment or contact me via Twitter @TrentWalton
This is EXACTLY the problem I’m having with a WordPress website I’m redesigning this week. In fact, as I lay in bed between snooze alarms this morning, I was thinking perhaps I could code the widget to be 80% wide and 200px tall.
...great minds... ;-)
There are better ways to embed maps on touch devices, like testing if we have a touch device or not with Modernizr. Then decide if you embed a full Google Map with all controls or just a Google Map image within a link that redirects you to Google Maps in the browser or to the dedicated app. Example: http://rappoldkoehli.ch/de/kontakt/
Another interesting thing to think about when it comes to maps. As I’ve been testing out a map in a current project, I actually have had more desktop issues with the scroll wheel on my mouse zooming in/out of the map as I’m trying to move down the page. #desktopcomplaintsneverend ;)
90% works great!
@Alexander Albrecht: Careful on detecting touch. The Chrombook Pixel for example would test POSTIVE for touch and probably expect an interactive map, it is a Google product after all :)
Maybe assuming touch + a size-based media query (fingers are fat) is the best solution there.
This is a *really* important point to highlight, Trent. Thanks for writing about it.
I built Crowdmap (currently in beta at http://bit.ly/WmndLK) this past year, which lives and dies by its ability to display maps full screen. I designed the UI to be ready for the exact problem you expressed, but using a different method.
The map is always full screen, and is the backdrop to the web page. By default, the added content is contained in a “card” sitting on top of the map, obstructing any accidental panning or zooming of the map.
A large “View map” button is attached to the card. Selecting the button slides the card to the bottom of the viewport, leaving a small amount of it visible. This allows the user to interact with the map and, when needed, slide the card back into view.
It seems to work really well for Crowdmap -- on all screen sizes.
I achieved the same result in a different manner. I’m sure there are better ways to do this, but you can view this example on http://thegeneratorpeoplepalmbeachc.om/contact
.googlemap { position: relative; padding-top: 350px; height: 0; overflow: hidden; }
.googlemap iframe,
.googlemap object,
.googlemap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
I’ve experimented with displaying the map as per usual, but disabling all the interactions (swipe to pan, pinch/double tap to zoom, etc...) so that it can be swiped/scrolled past. I then provide a button which enables interaction, but also takes the map full screen, thereby giving the user the maximum real estate to play with. The button obviously goes with them into full screen mode so that they can exit again. Works quite well IMHO.
Brilliant idea on having a smaller width! This was a huge hurdle in designing Kershaw knive’s store locator. I felt that it wasn’t the best method, but having a shorter height for the map seemed to do the trick.
Brad Frost mentioned using Google map images in his article about responsive maps. In the case of store locators, it might not be the best solution.
@Jenn Lukas: +1
@Brandon Rosage: Looks interesting! Invite requested :)
@Jordan Sowers: Kershaw looks great. I’d love to know more about how you made that happen.
That’s why I always - well, started doing so a month ago - give my map-container a padding: 5%; and a colored background. Together with the padding on my main-container, I a) get a nice arty-farty frame around my map and b) gives me room enough to ‘touch’ around the map.
I also give my map-container a max or a min height when I have a text column next to it in a bigger viewport (e.g. iPad). This way I can ‘control’ the height of both columns, especially when the text column contains a list.
I have to wonder at times how useful these maps even are to a mobile user. Even though its bad mojo to just hide a “feature” for mobile user I know I would rather copy and paste an address into the google maps app than screw around with a map embedded into a responsive site. For that reason I’ve (at times) just provided an address and hidden the map for small screens. This is good info though and I’ve also adhered to the rule to make room for swiping when I need to present a map, good read!
@Rory: I bet in most cases a link to map directions would be most helpful. A new(ish) problem I’m having is deciding which service to link to when we’ve got mobile devices from all the larger map providers + maybe linking to the service native to the device is preferred.
No one really uses 100% anyway. It’ll be a 100% container with padding inside.
Just make the container 90-95% and then keep everything inside it full width.
@Al:
Some do—that’s why I wrote the article :)
Yep. Agreeing with that in the last paragraph of the post.
@Trent:
Yep...just takes a little bit of logic to avoid the problems you mentioned :)
This jQuery/Zepto plugin neatly solves the issue:
http://labs.codecomputerlove.com/MapEscape/
Something to note... it appears the box-sizing and max-width{100%} can make things a bit funky, Ine just needs to be a bit more selective.
Other than that, I’m seeing some decent results with Google Maps API aside from having things center in all device views and figuring out how to make the infowindow populate with more content from a Myplaces saved map.
Great post, and it’s definitely something I have found a lot of developers seem to overlook.
A solution I often use is to show a Google static map (https://developers.google.com/maps/documentation/staticmaps/) at narrow viewports (up to 600px) with a link to Google maps for further directions / interaction. I find it saves bandwidth by just serving a static JPG, but the user has the option to open the map in Google maps if required.
One option is to disable the map in some way until the user decides they want to enable interaction:
Example: http://codepen.io/jreece/full/szlov
Something to note... it appears the box-sizing and max-width{100%} can make things a bit funky, Ine just needs to be a bit more selective.
@Adrian Osmond:
How can I stop the zooming in function when you swipe on a mobile device
The CSS hacks did not work for me for whatever reason.
So assuming you have a CSS “.mobile” in MediaQuery.
And assuming your Google map is in a Div id=“map”
The following works:
//Set the container width
if ($(‘.mobile’).is(‘:visible’)) {document.getElementById(“map”).style.width = ($(window).innerWidth()-1)+‘px’;}
//Code to initialize your map
googleMapInit();
Would this solution work on a custom map like the one at friendsyachting.com/italy/ ?
How should I put the container width at 90% please?
Thank you!