Custom cursor over an interactive polygon in Google Maps V3

Question

I created a clickable Polygon and mapped it to a map. I have a "crosshair" draggableCursor for the map. It would be nice to have the same cursor for the polygon. However, when I hover over the polygon, the cursor changes to a hand.

The only way to keep the cursor the same is to set clickable: false for the polygon, but it controls all event listeners for the inoperate polygon.

I spent half and tried to find a solution on the Internet, but could not. Does anyone have such a stone of knowledge?

Answer 1

After a little thought, I came up with a very hacker strategy for this. I include this for academic curiosity, but I would not recommend implementing it on a production site.

In pseudo code:

onPolygonMouseover: setTimeout(0 ms) onTimeout: Find all elements in the dom with cursor == pointer Set pointer to crosshair 

jQuery can be useful for finding all elements with cursor pointer ==. Alternatively, you can just iterate over the entire DOM.

Why time out?

A timeout is that I'm not sure what order the API provides events. If your event is processed before the internal API events, your cursor may be overwritten by the internal code.

Why timeout 0?

A timeout of 0 pushes the code onto the JS execution stack. It will be executed the next time a gap is executed in the execution of the code. It should be as soon as all the event processing code is complete.