Come creare una mappa Google a schermo intero con la sovrapposizione del menu del sito web?

Question

Sto costruendo un sito Web che consiste principalmente di grandi (manipolabili) grafici e mappe di Google sovrapposte con diversi tipi di dati. La navigazione del sito Web è una barra orizzontale di div HTML in alto, ma non completamente nella parte superiore.

Desidero trovare un modo per far sì che l'API/l'app delle mappe visualizzino "sotto" la navigazione e occupino l'intero resto della finestra. Qualcuno può consigliare?

Answer 1

Vuoi dire così: http://jsfiddle.net/8PpjH/1/

Aggiungi un contenitore:

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

Impostare alcuni stili:

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

caricare la mappa:

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

Una breve aggiornamento su la versione precedente:

HTML: (solo un contenitore)

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

CSS: (fino al vostro scopo, ma è necessario definire un'altezza e larghezza di vedere qualcosa)

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

Fonte: Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null