How do i set a custom image for the mouse cursor i

Question

I want to have a custom cursor while moused over the google map component on the page. I'd like to be able to programatically change the cursor to the custom image, then change it back to the default cursor.

I believe this is how you set the default cursor on your 'map' object

 map.setOptions({ draggableCursor: 'default' });

After some research and experimentation, i found the best way to do this was as follows:

 map.setOptions({ draggableCursor: 'url(path/to/your/image.png), crosshair' });

in css, only webkit supports a url value for the cursor attribute, so other browsers get the value of 'crosshair' in this case which solved my problem of needing to inform the users that they need to click on the map.

for more information on the draggableCursor attribute, please see the google maps api v3 documentation here: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

Hopefully this helps someone who is having trouble setting a custom cursor on a google map.

Answer 1

On mac it work perfectly on chrome, safari and firefox.

I simply use this:

map.setOptions({ draggableCursor : "url(http://s3.amazonaws.com/besport.com_images/status-pin.png), auto" })

ps: I read somewhere that you need your image to be under 64x64 on certain browser. Never have to try but maybe your problem is coming from that.

Answer 2

To back to the default cursor you can assing undefinded to draggableCursor variable:

map.setOptions({draggableCursor: undefined})

Answer 3

For those who are looking to set SVG as your draggableCursor. The solution us below.

 map.setOptions({ draggableCursor : "url(PATH_TO_YOUR_SVG.svg), pointer" });

Trust me its possible.