Right sidepanel

This page demonstrates how to make an automatically resizing Google map with a fixed-width side panel. The magic comes from the following tricks.

In the <head> section of the document:

<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 {
    /* extra 2px accounts
       for left border   */
    margin-right:302px;
    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>
In the <body>: 
<div id="map"></div>
<div id="rightpanel">

And finally, in your Javascript:

if (window.attachEvent) {
  window.attachEvent("onresize",
    function() {this.map.onResize()});
} else { 
  window.addEventListener("resize",
    function() {this.map.onResize()},
    false);
}

Don't forget to replace map with a global variable that holds your map!

View Code Last updated 03-Aug-2005