Wie erstellt man eine Google-Karte im Vollbildmodus mit Overlay im Website-Menü?

Question

Ich baue eine Website, die hauptsächlich aus großen (manipulierbaren) Graphen und Google Maps mit verschiedenen Arten von Daten besteht. Die Navigation der Website ist eine horizontale Leiste von HTML-divs über die Spitze - aber nicht ganz über die Spitze.

Ich möchte einen Weg finden, um die Maps API/App "unterhalb" der Navigation anzuzeigen und den gesamten Rest des Fensters aufzunehmen. Kann jemand beraten?

Answer 1

Wollen Sie diese wie: http://jsfiddle.net/8PpjH/1/

einen Container hinzufügen:

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

Set einige Stile:

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

laden Karte:

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

Eine kurze Aktualisieren auf die vorherige Version:

HTML: (nur ein Container)

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

CSS: (bis zu Ihrem Ziel, aber Sie haben eine Höhe und Breite zu definieren, um etwas zu sehen)

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

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