如何使用网站菜单覆盖制作全屏Google Map？ [英] How to make a full screen Google Map with website menu overlay?

问题描述

我正在建立一个主要由大型（可操作）图表和Google地图覆盖不同类型数据的网站。网站导航是横跨顶端的HTML div横框，但并不是顶端的所有方式。

我想找到一种方法来制作maps API / app显示在导航下并占据整个窗口的其余部分。任何人都可以提出建议？ 解决方案

你的意思是这样的： http://jsfiddle.net/8PpjH/1/

添加容器：

 < div id =container> 
< div id =nav>导航菜单< / div> 
< div id =map>< / div> 
< / div> 
  

设置一些样式：

  html {height：100％} 
 body {height：100％; margin：0px; padding：0px} 
 #container {width：100％;身高：100％} 
 #nav {z-index：100;位置：绝对; 
 margin：10px 0px 0px 200px; background-color：#fff; 
 border：1px＃000固体;填充：5px; } 
 #map {width：100％;身高：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）; 
  

I am building a website that primarily consist of large (manipulable) graphs and Google Maps overlayed with different kinds of data. The website navigation is a horizontal bar of HTML divs across the top -- but not all the way across the top.

I want to find a way to make the maps API/app display "underneath" the navigation and take up the entire rest of the window. Can anyone advise?

解决方案

Do you mean like this: http://jsfiddle.net/8PpjH/1/

Add a container:

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

Set some styles:

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

Load the map:

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

这篇关于如何使用网站菜单覆盖制作全屏Google Map？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！