How do i set a custom image for the mouse cursor in a google map api v3 map

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.