StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to create a custom GControl
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload