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">
  v\:* {
    behavior:url(#default#VML)}
  html, body {width:100%; height:100%}
  html {overflow: hidden}
  body {
    margin:0px 0px 0px 0px;
    padding:0px;
    background-color:#CCCCCC;
  #map {
    margin-right:330px;
    height: 100%}
  #rightpanel {
    position: absolute;
    right: 0px; top: 0px;
    width:315px; height:99%;
    padding: 10px 5px 0px 10px;
    overflow:auto;
    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 15-Jul-2005