How to make a full screen Google Map with website menu overlay?

Question

I am building a website that primarily consist of large (manipulable) graphs and Google Maps overlayed with different kinds of data. The website navigation is a horizontal bar of HTML divs across the top -- but not all the way across the top.

I want to find a way to make the maps API/app display "underneath" the navigation and take up the entire rest of the window. Can anyone advise?

Answer 1

Do you mean like this: http://jsfiddle.net/8PpjH/1/

Add a container:

<div id="container">
    <div id="nav">Nav Menu</div>
    <div id="map"></div>
</div>

Set some styles:

html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#container { width: 100%; height: 100% }
#nav { z-index: 100; position: absolute; 
       margin: 10px 0px 0px 200px; background-color: #fff; 
       border: 1px #000 Solid; padding: 5px; }
#map { width: 100%; height: 100% }

Load the map:

var mapOptions = {
        center: new google.maps.LatLng(40.435833800555567, -78.44189453125),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 11
      };     
var map = new google.maps.Map(document.getElementById("map"), mapOptions);