Search code examples
imagegoogle-mapsgoogle-maps-api-3mouse-cursor

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

I want to have a custom cursor while moused over the Google Maps component on the page. I'd like to be able to programmatically change the cursor to the custom image, and 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: Google Maps JavaScript API V3 Reference, MapOptions interface.

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

How do I set a custom image for the mouse cursor in a Google Maps API v3 map?

Solution

  • On Mac, it work perfectly in Google, 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 in a certain browser. I never have to try, but maybe your problem is coming from that.