Tell me more ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.
up vote 5 down vote favorite

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:

http://i.imgur.com/7Lla7.png

Thanks!

share|improve this question

2 Answers

up vote 3 down vote accepted

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.

share|improve this answer
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 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 at 17:47
Thanks for the example! I might be able to use this to accomplish my goal. – David Mills Jan 28 at 17:13
up vote 3 down vote
+25

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.

share|improve this answer
I'm not sure how a box shadow will help for polygons. – Anthony -GISCOE- Jan 18 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 at 18:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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