Hack #47 — 右側にパネル

右側にパネルを表示

左側に自動リサイズの地図を表示しつつ、右側に固定幅のパネルを表示します。

<head>部に次のように指定してあります。

<style type="text/css">
  html, body {width:100%; height:100%}
  html {overflow: hidden}
  body {
    margin: 0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    background-color:#CCCCCC;
    }
  #map {
    margin-right:320px;
    height: 100%;
    }
  #rightpanel {
    position: absolute;
    right: 0px; top: 0px;
    width:300px; height:100%;
    padding: 10px 5px 0px 10px;
    overflow:auto;
    border-left: 2px solid black;
    background-color:#CCCCCC}
</style>

<body>部は次のように書かれています。

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

そして、JavaScriptのコードは次のとおりです。

  if (GBrowserIsCompatible()) {
	  var map = new GMap2(document.getElementById("map"));
	  map.setCenter(new GLatLng(35.6853, 139.7532), 13);
    map.addControl(new GSmallMapControl());
  }