Làm thế nào để tạo một Bản đồ Google toàn màn hình với lớp phủ menu trang web?

Question

Tôi đang xây dựng một trang web chủ yếu bao gồm các đồ thị lớn (có thể thao tác) và Google Maps được phủ bằng các loại dữ liệu khác nhau. Điều hướng trang web là một thanh ngang của các div HTML trên đầu trang - nhưng không phải tất cả các cách trên đầu trang.

Tôi muốn tìm cách tạo bản đồ API/ứng dụng hiển thị "bên dưới" điều hướng và chiếm toàn bộ phần còn lại của cửa sổ. Bất cứ ai có thể tư vấn cho?

Answer 1

Bạn có nghĩa là như thế này: http://jsfiddle.net/8PpjH/1/

Thêm một container:

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

Đặt một số phong cách:

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

tải bản đồ:

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

Một ngắn cập nhật lên các phiên bản trước:

HTML: (chỉ một container)

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

CSS: (lên đến mục đích của bạn, nhưng bạn phải xác định một chiều cao và chiều rộng để xem một cái gì đó)

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

Nguồn: Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null