title: How to create a custom GControl
body: <p>I'm trying to create a gray "frame" (see pic below) around a google map, to try to convey the concept of an area of focus, as oppose to a point (which is usually represented with a marker). Note that this is not an overlay, that is, the gray "frame" should not move when you drag the map. </p>
  
  <p><strong>Edited: image link added</strong></p>
  
  <p><img src="https://i.stack.imgur.com/QHbfv.jpg" alt="http://i680.photobucket.com/albums/vv170/bustrofedon_bucket/inage1.jpg"></p>
  
  <p>It appears that only option is to "subclass" GControl to create a custom control. I have 3 questions</p>
  
  <p>1) First of all, is GControl subclassing the best course of action?</p>
  
  <p>2) In my example, the canvas (div) where map renders can change its size (i.e is not fixed width). Do I have to delete and add custom control when canvas changes size? See docs <a href="http://code.google.com/apis/maps/documentation/controls.html#Custom_Controls" rel="nofollow noreferrer">http://code.google.com/apis/maps/documentation/controls.html#Custom_Controls</a> on how to create a custom map control.</p>
  
  <p>3) Now, how to do it. Naively, I thought I could create a table with 3 columns and 3 rows, and set display: none for the cell in the middle. But that doesn't work. I've also experimented with clipping, that didn't work either. My css skills are quite lacking, so there must be way to do this more elegantly than adding four rectangular gray divs. If I wanted to add an inner border, with divs, I would need to paint 8 then. In a nutshell, what's the best way to create a "hollow" rectangle?</p>
  
  <p>Thanks
  P.S. This is my first entry to StackOverflow. Just discovered it. It's impressive how well SO is put together.</p>