How to manage scrolling issues of a full-width embedded google map in a webpage?

Question

We would like to have an embedded map in a webpage.
This map will have 100% width of the browser window meaning that there will not be any real estate left for the user to have the mouse out of the map area in order to scroll the page.

As you can imagine the situation is that the user is going to scroll the page and then he is going to get stuck in google maps unless he uses the scroll bars which is an unpleasant experience.

The experience gets worse if the user has the mouse at the bottom of the page when scrolling

What makes situation even harder is that the map is expected to cover the entire height of the viewport of the browser.

The current solution that we have thought of (sorry no resources for user testing at the moment) is the following:

There is a large semi-transparent overlay over the map.
The user clicks on it and this overlay minimizes to a button-like square which the user can click to maximize the overlay once again. While the google map is "enabled" (meaning no overlay) the user has available to large buttons taking up some real estate from the map itself which on click scroll the page automatically either to the end of the previous section or the beginning of the next section accordingly.

We are looking for the optimal user experience for this situation before start implementation.
Any suggestions, alternative ideas or concerns are more than welcome!

Answer 1

Getting in the trap of scrolling map area instead of page scrolling is definitely bad experience. Still current solution looks overcomplicated and provides a barrier to interaction.

The design looks a bit contradictory: large map area assumes reach user interaction with map content (primary task), but scrolling beyond map control looks like users don't need this task, transforming it to secondary task (for small fraction of users). So the better solution depends on the users' goals.

Anyway, my suggestions are:

1. If work with map is separate big task wich require heavy interaction, place it on separate page to focus them on this task. So those users who really need it will have good experience of working with map, while the others just skip it.

2. You can show smaller map control with optimal scale and focused object initially. For some users it will be enough. For thouse who need to work with map, provide a control to enlarge/contract map area. These users will stay with map control for longer time and probably need no scrolling out of the map.

3. (A bit tricky!) Display smaller map area, and auto-detect, if user started to interact with map. It's a signal for you to enlarge map area to provide good experience while working with map. Providing "exit" points here is good, too, see the picture: (I'd prefer section names with arrows to make it more clear to users)

4. Display full screen map with scrolling support initially, but provide "exit points": (this solution is good if MOST of your users will work with map)

5. Provide Use scroll for scaling toggle control on the map control, if MOST of your users skip the map.

All the points minimize the possible scrolling issue for non-intersted users, and provide good experiense for interested ones.

UPDATE:
Pay attention of how they do it on Google Maps Embed API: they allow scrolling for scaling only after user clicks within map, it's my 3rd option.

Answer 2

I must admit that after further explanations Alexey Kolchenko offered a better solution for the specific case.

So in case you can work with Google Maps API and build your own dynamic map rather than rely on Google Map creation tool you could have a solution like this:

And he offers the following points as advantages which I agree with all of them:

• Clear shows this is Portfolio section and the “liveness” of the startup
• Display the number of projects (it’s hard to count them using markers)
• Map includes all the markers (due to scale of the map)
• Right semi-transparent block is good for page scrolling (map responds to scroll by scaling it)
• Expand the map to full screen if needed

However there are a few cons with it that should be taken under consideration:

First the solution requires a rather large screen and should be redesigned for a good mobile experience.
Secondly, and most importantly, the development time is much larger because you need to use Google Maps API, your own database to store the information, your own graphics to display a rectangle when clicking on a pin on the map and generally you should implement logic that otherwise is already there with google maps.

The intermediate solutions where you would retrieve the information from Google database via Google APIs to create the dynamic list on the right have not been considered.

You may now experience an actual, first, implementation of the above idea at the following website: http://pligor.com

Enjoy!