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!