Google maps api Circle gradient?

Question

I am adding circle overlays to my map. I can now properly set the color, opacity etc. How would I achieve a color gradient (ie radially out from the center)? Is this even possible?

(I am using api v3, but if you have a solution with v2 I would love to see it too).

Answer 1

You should be able to do this with the CSS background:radial-gradient rule. For example:

background: radial-gradient(ellipse at center,
    rgba(50,255,84,1) 0%, 
    rgba(255,0,0,0.79) 26%, 
    rgba(239,0,235,0.46) 67%,
    rgba(255,255,255,0.2) 100%); 

There are many browser-specific implementation of the backbround property, so working with this looks like it can be a little unwieldy. Here's a website that generates custom CSS color gradients along with the browser-specific implementations: http://www.colorzilla.com/gradient-editor/

Once you've got the color gradient you like, you could create a new CSS class based on the rule set generated from the ColorZilla website and apply these classes to the overlaid elements when they are added to the map.