CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Sunny
Sunny

Reputation: 10075

Syntax for setting draggablecursor property in google maps api

I want to change the Draggablecursor for Google Maps to a custom image. I can set it to a name such as "crosshair" or "move" but I cannot get it to work with an image url. I tried every possible syntax I could google, including some which I thought were ridiculously wrong. Among them:

   var mapOptions = {
    ...
            draggableCursor: '../images/mapcursor.jpg',
            draggableCursor: 'url("../images/mapcursor.jpg")',
            draggableCursor: 'url(../images/mapcursor.jpg) 20 20, default' , 
            draggableCursor: 'url("http://www.blablabla.com/images/mapcursor.png")',
            draggableCursor:  url("http://www.blablabla.com/images/mapcursor.png") ,
    ... 
    };

The documentation merely states that it should be "The name or url of the cursor to display when mousing over a draggable map." Can someone provide some guidance or pointers to what the exact syntax ought to be? Words like "default" in url are not known to me.

Thanks

Upvotes: 2

Views: 3349

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

I manage to get it using external url like:

    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        draggableCursor: 'url(http://powerhut.co.uk/googlemaps/marker-images/image.png), crosshair',
    };

Instead of crosshair you can use default, move... as fallback.

See also reported issue.

I expected that simple draggableCursor: 'images/mycursor.png' would work. Full path works:

        draggableCursor: 'url(file:///C:/Users/....../Google%20Maps/images/finish.png), crosshair',

and short path, too:

draggableCursor: 'url(images/finish.png), crosshair',

So, it seems that valid usage is:

draggableCursor: 'url(externalLink|fullPath|relativePath), fallbackCursor',

Upvotes: 2

Related Questions