How do you handle panning a map embedded on a scrollable web page for touch devices?

Question

I'm currently developing a dashboard-style web interface with an embedded Bing V7 map and it's working great.

On a tablet, usually the map will be shown half above 'the fold' and half below. This causes a bit of grief when trying to scroll up & down the page using a touch interface, as the map takes the focus and starts panning/zooming.

I've been thinking about things like checking how much of the map is visible, disabling scroll of the map under certain situations, forcing a single tap to activate, things like that.

Google searches haven't come up with any ideas so any thoughts are appreciated.

Answer 1

I can think of two solutions, which combine into a third best solution:

Resize the map to accommodate only the available space, with no scrolling. This is assuming it's important to see the information above the map while the user deals with the map itself. Also, this assumes you can compromise on the size allocated to the map.

If you can't compromise the size of the map, but you can allow to focus solely on it, then you can make it take over the screen the moment it is touched or manipulated.

A less intrusive middle solution would let the user decide in which of the above modes she prefers to work. This can be easily achieve with an "Expand" button, which is quite recognizable.

^{download bmml source – Wireframes created with Balsamiq Mockups}