<p>I have a page with a Google Maps mashup that has pushpins that are color-coded by day (Monday, Tuesday, etc.) The IFrame containing the map is dynamically sized, so it gets resized when the browser window is resized. </p>

<p>I'd like to put a legend in the corner of the map window that tells the user what each color means. The Google Maps API includes a <code><a href="http://code.google.com/apis/maps/documentation/reference.html#GScreenOverlay" rel="nofollow noreferrer">GScreenOverlay</a></code> class that has the behavior that I want, but it only lets you specify an image to use as an overlay, and I'd prefer to use a DIV with text in it. What's the easiest way to position a DIV over the map window in (for example) the lower left corner that'll automatically stay in the same place relative to the corner when the browser window is resized?</p>

[{'answer_id': 36821, 'author': 'Tom', 'author_id': 3715, 'author_profile': 'https://Stackoverflow.com/users/3715', 'pm_score': 2, 'selected': False, 'text': '<p>I would use HTML like the following:</p>\n\n<pre><code>&lt;div id="wrapper"&gt;\n   &lt;div id="map" style="width:400px;height:400px;"&gt;&lt;/div&gt;\n   &lt;div id="legend"&gt; ... marker descriptions in here ... &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>You can then style this to keep the legend in the bottom right:</p>\n\n<pre><code>div#wrapper { position: relative; }\ndiv#legend { position: absolute; bottom: 0px; right: 0px; }\n</code></pre>\n\n<p><code>position: relative</code> will cause any contained elements to be positioned relative to the <code>#wrapper</code> container, and <code>position: absolute</code> will cause the <code>#legend</code> div to be "pulled" out of the flow and sit above the map, keeping it\'s bottom right edge at the bottom of the <code>#wrapper</code> and stretching as required to contain the marker descriptions.</p>\n'}, {'answer_id': 42792, 'author': 'Bernie Perez', 'author_id': 1992, 'author_profile': 'https://Stackoverflow.com/users/1992', 'pm_score': 4, 'selected': True, 'text': '<p>You can add your own Custom Control and use it as a legend.</p>\n\n<p>This code will add a box 150w x 100h (Gray Border/ with White Background) and the words "Hello World" inside of it. You swap out the text for any HTML you would like in the legend. This will stay Anchored to the Top Right (G_ANCHOR_TOP_RIGHT) 10px down and 50px over of the map.</p>\n\n<pre><code>function MyPane() {}\nMyPane.prototype = new GControl;\nMyPane.prototype.initialize = function(map) {\n  var me = this;\n  me.panel = document.createElement("div");\n  me.panel.style.width = "150px";\n  me.panel.style.height = "100px";\n  me.panel.style.border = "1px solid gray";\n  me.panel.style.background = "white";\n  me.panel.innerHTML = "Hello World!";\n  map.getContainer().appendChild(me.panel);\n  return me.panel;\n};\n\nMyPane.prototype.getDefaultPosition = function() {\n  return new GControlPosition(\n      G_ANCHOR_TOP_RIGHT, new GSize(10, 50));\n      //Should be _ and not &amp;#95;\n};\n\nMyPane.prototype.getPanel = function() {\n  return me.panel;\n}\nmap.addControl(new MyPane());\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/36515', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1482/']