如何使用網站菜單覆蓋製作全屏Google Map？

Question

我正在構建一個網站，主要由大量（可操縱）的圖表和Google地圖覆蓋不同類型的數據組成。網站導航是橫跨頂端的HTML div橫條，但並不是頂端的所有方式。

我想找到一種方法讓地圖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% } 

加載地圖：

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

Answer 2

短更新以前的版本：

HTML：（只是一個容器）

<div id="map"></div> 

CSS：（到你的目的，但你必須定義的高度和寬度，看到的東西）

#map{ 
    height: 400px; 
    width: 300px; 
} 

的JavaScript ：

function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map"), 
      myOptions); 
} 

google.maps.event.addDomListener(window, "load", initialize); 

來源： Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null