Jak utworzyć pełnoekranową mapę Google z nakładką menu witryny?

Question

Buduję stronę internetową, która składa się głównie z dużych (manipulowanych) wykresów i Map Google nakładanych na różne rodzaje danych. Nawigacja w witrynie to poziomy pasek HTML divs na górze - ale nie na całej górze.

Chcę znaleźć sposób, aby mapy API/aplikacji wyświetlały się "pod" nawigacją i zajmowały całą resztę okna. Czy ktoś może doradzić?

Answer 1

Czy to znaczy tak: http://jsfiddle.net/8PpjH/1/

Dodaj pojemnika:

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

ustawić kilka stylów:

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

ładowania mapy:

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

Krótki aktualizować na poprzednia wersja:

HTML (tylko kontenerem)

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

CSS: (aż do celu, ale trzeba określić wysokość i szerokość, aby zobaczyć coś)

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

Źródło: Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null