I am in the process of designing an overlay on a Google Map that resembles a real map placed on a table, using 2 pixel lines as creases above the map. This design does not significantly impact interactions with the map; only 6 out of 500 vertical lines are unclickable. I am utilizing a javascript library called ext-forward to forward clicks on better browsers, reducing the issue.
However, the problem arises when markers placed on the map appear below the creases, despite having 3d style shadows.
The markers are children of the map div, while the creases are at the same level as the map div, making them siblings. The map is set at z-index 0 and the markers have a z-index of less than 100. No matter what z-index value I assign to the creases, they always render either above or below the map div and never in between. Is there any way to resolve this issue?