First of all:
The problem is that I want to add a gradient layer on top of Google Map with CSS, and so far I would be able to add it. However, the problem is it just blocking map from panning, and I can't pan my map by adding :after, how can I achieve that desired effect with CSS?
Here is my :after
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(#ff72734d, #9198e570); // colors has less opacity baked on their hex values, by that i can see map it self...
Secondly:
Is it possible to make a div on top of all elements that does not block user from selecting elements behind of that div (even better way instead of :after ), by that I would be able to add another div that has a gradient effect on it to be placed on top of the Google Map layer, is it possible?
By the way, I'm using react with react-google-maps , but if you guys know any solution for this problem , you know that it is so simple to add that by CSS, but I'm hinting react-google-maps here just because of may be some one know a better way with javascript to add the desired effect.
Desired effect is something like below
Please notice those gradients around map that I pointed with red arrows
