web-dev-qa-db-ja.com

ウェブサイトのメニューオーバーレイでフルスクリーンのGoogleマップを作成するにはどうすればよいですか？

私は主に大きな（操作可能な）グラフとさまざまな種類のデータでオーバーレイされたGoogleマップで構成されるWebサイトを構築しています。 Webサイトのナビゲーションは、上部にあるHTML divの水平バーですが、上部全体に表示されるわけではありません。

マップAPI /アプリをナビゲーションの「下」に表示し、ウィンドウの残り全体を占めるようにする方法を見つけたいと思います。誰かアドバイスできますか？

google-mapsgoogle-maps-api-3scale
10
reallymemorable

このような意味ですか： http://jsfiddle.net/8PpjH/1/

コンテナを追加します。

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

いくつかのスタイルを設定します。

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

マップをロードします。

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