For a project I'm working on, I needed to place thousands of markers on a Google Map. To achieve the scale required without compromising performance, I opted to use THREE.js to render everything onto a separate canvas layered on top of the map. It's an unconventional approach, but it has been effective - for the most part.
However, one issue that arose is that these markers cover the map controls. This becomes problematic particularly in IE10, a browser I need to support, as it lacks support for pointer-events:none, preventing me from controlling the map through this overlaying div.
I have tried various workarounds for IE10 pointer-events:none without success. Additionally, I attempted placing a separate div above everything and instructing Google to position the controls there, but this method proved ineffective. Though I considered using a Custom Overlay, I want to ensure it remains unaffected by map interactions.
My query is whether anyone has insight into resolving this dilemma; specifically, either superimposing the map controls over my new div or inserting the marker canvas into the Map stack between the map and the controls?
Thank you in advance!