Custom cursor over clickable polygon in Google Maps V3

Question

I have created clickable Polygon and attached it to the map. I have 'crosshair' draggableCursor set for the map. It would be nice to have the same cursor for the polygon as well. However, when I hover on the polygon, the cursor is changed to a hand.

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

I have spent half and our trying to find a solution on the web, but failed. Do anyone possesss such a gem of knowledge?

Answer 1

After a bit of thinking I've come up with a very hacky strategy for doing this. I include this for academic curiosity, but I wouldn't recommend implementing it in 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 might be useful for finding all elements with cursor == pointer. Alternatively you could just iterate over the entire DOM.

Why the timeout?

The timeout is because I'm unsure which order the API exposes events in. If your event is processed before the internal API events, your cursor might get overwritten by internal code.

Why a timeout of 0?

A timeout of 0 pushes the code on the JS execution stack. It will be executed next time theres a "break" in the code execution. This should be once all the event processing code has finished.