Is it possible to produce an "inner glow" effect on polygons drawn using the Google Map v3 javascript API?

If not possible using the vanilla Google Maps API, is there a 3rd party tool that can do it? Or perhaps some other technique I could use to accomplish my goal?

The inner glow effect I desire would resemble this:




No, it is not possible using the regular API. It may be possible with a third-party library, but not likely for all browsers. Google Maps uses (or at least used to) multiple ways of drawing geometry (e.g. SVG, HTML canvas, etc.) depending on the browser, so even if you could hook into those geometry functions, one solution for inner glow would likely not work in all browsers.

Your best bet would probably be to find (if it exists) a third-party library that has its own geometry functionality and use it on top of Google Maps.

Alternately, if you can live without inner-only glow, you could use the API and create multiple polygons with various opacities, which should give you a (inner and outer) glow effect.

  • This is basically the conclusion I reached before posting the question. No, is doesn't appear that the vanilla GMaps API can do it. I could draw SVG paths in a custom layer on top of the map and possibly use SVG to create an "inner glow" effect, but that won't work consistently in all browsers. Drawing multiple polygons like you suggest sounds both complex and kludgy, but might work. I'd love to see an example. – David Mills Jan 22 '13 at 18:18
  • Drawing multiple polygons is kludgy (and obviously hurts performance), but it's pretty straightforward: jsfiddle.net/E5MHC (this is based on the Google sample "Simple polygons"). – Anthony -GISCOE- Jan 23 '13 at 17:47
  • Thanks for the example! I might be able to use this to accomplish my goal. – David Mills Jan 28 '13 at 17:13

If you have access to the underlying HTML element that renders the polygon (I'm not that familiar with the GMaps Api) you could apply this method to draw a Inner Glow. I know is not a solution but that might give you an idea of how to do it.

  • I'm not sure how a box shadow will help for polygons. – Anthony -GISCOE- Jan 18 '13 at 13:40
  • Even if I could get at the underlying DOM element that the GMaps API draws (and it's not clear that I can), the box shadow CSS will not help for an arbitrary polygon. – David Mills Jan 22 '13 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.