Trying out a new map interface here where the entire screen is covered by a (Google) map and my app chrome (not sure what else to call it - menus, controls, etc.) float or fade away when not needed. Check out this experimental interface.
After the page fully loads, the top menu fades out, but reappears if you move the mouse cursor to the top of the window. The legend tabs widget can be collapsed and moved around.
However, there seems to be an issue - in a horizontal area of the window near the tabs widget, the map cannot be clicked on. You'll notice that the cursor changes from a hand (indicating accessibility) to an arrow (showing no access). In this band, markers cannot be clicked on and the map cannot be dragged.
The structure of the webpage is as follows:
<div id="map">map</div>
<header></header>
<div id="tabs"></div>
<footer></footer>
The z-index of #map is set to -1. If I don't do this, then the header fades in and out randomly when hovering with the mouse. Setting the map's z-index to -1 fixes the header issue.
If I move the map div after the header, it covers the header. This setup doesn't work:
<header></header>
<div id="map">map</div>
<div id="tabs"></div>
<footer></footer>
Why am I unable to click on part of the map as it seems like #tabs is blocking #map? However, #tabs is only 300px wide so it shouldn't affect the rest of the map.