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


i building website consist of large (manipulable) graphs , google maps overlayed different kinds of data. website navigation horizontal bar of html divs across top -- not way across top.

i want find way make maps api/app display "underneath" navigation , take entire rest of window. can advise?

do mean this: http://jsfiddle.net/8ppjh/1/

add container:

<div id="container">     <div id="nav">nav menu</div>     <div id="map"></div> </div> 

set 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 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); 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -