No time to clean up the formatting more, sorry! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Google Maps JavaScript API Example - simple</title> <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAy6MBiqsAuMYcRcIXE-SdkhQI513BVj7Itr7WPMGFabbrMAySrRTqrYgzCD2NDBq2Npe_EDAW--Is2A" type="text/javascript"></script> <!-- Make the document body take up the full screen, declare styles --> <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;} #map { margin-right:302px; /*extra 2px accounts for left border*/.code {font-family: "Courier New", Courier, mono;} .style2 {font-family: "Courier New", Courier, mono; font-weight: bold; } </style> </head> <body> <!-- Declare the containers -->
height: 100% } #rightpanel { position: absolute; right: 0px; top: 0px; width:300px; height:100%; overflow:auto; background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:11px;
border-left:2x solid black; padding: 10px 5px 0px 10px; /* In MSIE; padding-bottom MUST be 0px or panel's scrollbar will go under status bar */ }<div id="map"></div> <div id="rightpanel"><!-- This is just the sidepanel content --> <p style="text-align:center; text-decoration:underline; font-weight:bold">Right sidepanel</p> <p>This page demonstrates how to make an automatically resizing Google map with a fixed-width side panel. The magic comes from the following tricks.</p> <p>In the <span class="code"><head></span> section of the document:</p> <pre> <<span style='color:#800000; font-weight:bold; '>style</span> type="<span style='color:#800000; font-weight:bold; '>text</span>/css"<span style='color:#808030; '>></span> v\<span style='color:#808030; '>:</span><span style='color:#808030; '>*</span> <span style='color:#800080; '>{</span> <span style='color:#008484; '>behavior</span><span style='color:#808030; '>:</span><span style='color:#400000; '>url</span><span style='color:#808030; '>(</span><span style='color:#800000; font-weight:bold; '>#</span><span style='color:#7d0045; '>default#VML</span><span style='color:#808030; '>)</span><span style='color:#800080; '>}</span> <span style='color:#800000; font-weight:bold; '>html</span><span style='color:#808030; '>,</span> <span style='color:#800000; font-weight:bold; '>body</span> <span style='color:#800080; '>{</span><span style='color:#bb7977; font-weight:bold; '>width</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>100</span><span style='color:#006600; '>%</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>height</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>100</span><span style='color:#006600; '>%</span><span style='color:#800080; '>}</span> <span style='color:#800000; font-weight:bold; '>html</span> <span style='color:#800080; '>{</span><span style='color:#bb7977; font-weight:bold; '>overflow</span><span style='color:#808030; '>:</span> <span style='color:#074726; '>hidden</span><span style='color:#800080; '>}</span> <span style='color:#800000; font-weight:bold; '>body</span> <span style='color:#800080; '>{</span> <span style='color:#bb7977; font-weight:bold; '>margin</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>0</span><span style='color:#006600; '>px</span> <span style='color:#008c00; '>0</span><span style='color:#006600; '>px</span> <span style='color:#008c00; '>0</span><span style='color:#006600; '>px</span> <span style='color:#008c00; '>0</span><span style='color:#006600; '>px</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>padding</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>0</span><span style='color:#006600; '>px</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>background-color</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>#</span><span style='color:#008000; '>CCCCCC</span><span style='color:#800080; '>;</span> #map { <span style='color:#bb7977; font-weight:bold; '>margin-right</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>330</span><span style='color:#006600; '>px</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>height</span><span style='color:#808030; '>:</span> <span style='color:#008c00; '>100</span><span style='color:#006600; '>%</span><span style='color:#800080; '>}</span> <span style='color:#808030; '>#</span>rightpanel <span style='color:#800080; '>{</span> <span style='color:#bb7977; font-weight:bold; '>position</span><span style='color:#808030; '>:</span> <span style='color:#074726; '>absolute</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>right</span><span style='color:#808030; '>:</span> <span style='color:#008c00; '>0</span><span style='color:#006600; '>px</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>top</span><span style='color:#808030; '>:</span> <span style='color:#008c00; '>0</span><span style='color:#006600; '>px</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>width</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>315</span><span style='color:#006600; '>px</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>height</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>99</span><span style='color:#006600; '>%</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>padding</span><span style='color:#808030; '>:</span> <span style='color:#008c00; '>10</span><span style='color:#006600; '>px</span> <span style='color:#008c00; '>5</span><span style='color:#006600; '>px</span> <span style='color:#008c00; '>0</span><span style='color:#006600; '>px</span> <span style='color:#008c00; '>10</span><span style='color:#006600; '>px</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>overflow</span><span style='color:#808030; '>:</span><span style='color:#074726; '>auto</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>background-color</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>#</span><span style='color:#008000; '>CCCCCC</span><span style='color:#800080; '>}</span> </<span style='color:#800000; font-weight:bold; '>style</span><span style='color:#808030; '>></span> </pre> <p>In the <span class="code"><body></span>:</p> <pre> <span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#274796; '> </span><span style='color:#074726; '>id</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"map"</span><span style='color:#a65700; '>></span><span style='color:#a65700; '></</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#274796; '> </span><span style='color:#074726; '>id</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"rightpanel"</span><span style='color:#a65700; '>></span> </pre> <p>And finally, in your Javascript:</p> <pre> <span style='color:#800000; font-weight:bold; '>if</span> <span style='color:#808030; '>(</span>window<span style='color:#808030; '>.</span>attachEvent<span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span> window<span style='color:#808030; '>.</span>attachEvent<span style='color:#808030; '>(</span><span style='color:#0000e6; '>"onresize"</span><span style='color:#808030; '>,</span> <span style='color:#800000; font-weight:bold; '>function</span><span style='color:#808030; '>(</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span><span style='color:#800000; font-weight:bold; '> this</span><span style='color:#808030; '>.</span>map<span style='color:#808030; '>.</span>onResize<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#800080; '>}</span> <span style='color:#800000; font-weight:bold; '>else</span> <span style='color:#800080; '>{</span> window<span style='color:#808030; '>.</span>addEventListener<span style='color:#808030; '>(</span><span style='color:#0000e6; '>"resize"</span><span style='color:#808030; '>,</span> <span style='color:#800000; font-weight:bold; '>function</span><span style='color:#808030; '>(</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span><span style='color:#800000; font-weight:bold; '> this</span><span style='color:#808030; '>.</span>map<span style='color:#808030; '>.</span>onResize<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>}</span> <span style='color:#808030; '>,</span> <span style='color:#0f4d75; '>false</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#800080; '>}</span> </pre> <p>Don't forget to replace <span class="style2">map</span> with a global variable that holds your map!</p> <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr> <td align="left"><a href="SidepanelCode.htm">View Code</a></td> <td align="right"><em>Last updated 15-Jul-2005</em></td> </tr></table>
</div>
<script type="text/javascript"> //<![CDATA[ var map; if (GBrowserIsCompatible()) { map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);// Monitor the window resize event and let the map know when it occurs if (window.attachEvent) { window.attachEvent("onresize", function() {this.map.onResize()} ); } else { window.addEventListener("resize", function() {this.map.onResize()} , false); }} //]]> </script> </body> </html>