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
Post a Comment