google-maps - 如何制作带有网站菜单覆盖的全屏谷歌地图？

Question

我正在构建一个网站，主要由大型(可操作)图表和覆盖有不同类型数据的 Google map 组成。网站导航是横跨顶部的 HTML div 水平条，但不是一直横跨顶部。

我想找到一种方法，使 map API/应用程序显示在导航“下方”并占据窗口的整个其余部分。谁能给点建议吗？

Answer 1

你的意思是这样的:http://jsfiddle.net/8PpjH/1/

添加容器:

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

设置一些样式:

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% }

加载 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);