6

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:

https://i.sstatic.net/U0BAK.png

Thanks!

3 Answers 3

3

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.

3
  • 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. Commented Jan 22, 2013 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"). Commented Jan 23, 2013 at 17:47
  • Thanks for the example! I might be able to use this to accomplish my goal. Commented Jan 28, 2013 at 17:13
3
+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.

2
  • I'm not sure how a box shadow will help for polygons. Commented Jan 18, 2013 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. Commented Jan 22, 2013 at 18:12
2

One superficial way to achieve a haloish effect is to add the polygon twice and set the strokePosition on one of them as google.maps.StrokePosition.OUTSIDE and the other as google.maps.StrokePosition.INSIDE with desired colors and opacity.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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