I can change the map's draggableCursor for example but I even if I change it polygon's cursor is still pointer since the map is behind polygons. I would like to set the polygon's cursor to 'move' so as to be clear that polygon is draggable.

What is the proper way to change polygon's cursor? Is there a property or method to do it? (Ive read Google's documentation but I didnt find anything)

ps. I have reason to use Polygon over Polyline so Polyline is not an option.

I can change the map's draggableCursor for example but I even if I change it polygon's cursor is still pointer since the map is behind polygons. I would like to set the polygon's cursor to 'move' so as to be clear that polygon is draggable.

What is the proper way to change polygon's cursor? Is there a property or method to do it? (Ive read Google's documentation but I didnt find anything)

ps. I have reason to use Polygon over Polyline so Polyline is not an option.

• javascript
• google-maps
• google-maps-api-3

• 1 unfortunately there is no option to change the cursor. the pointer appears to signalize that the polygon is clickable, but when you set the clickable-option to false(in that case the dragging-cursor would appear), the polygon isn't draggable anymore. – Dr.Molle Commented May 15, 2013 at 1:45

5 Answers 5

Actually it seems to be possible. Here is the idea.
css:

.moving,
.moving * {cursor: move !important;} 

js:

google.maps.event.addListener(myPolygon, 'mousemove',
    function(e) {
        if (!isNaN(e.edge) || !isNaN(e.vertex))
            mapCanvas.className = '';
        else
            mapCanvas.className = 'moving';        
    }
);

google.maps.event.addListener(myPolygon, 'mouseout',
    function() {
        mapCanvas.className = '';
    }
);

Cheers!

Building on the answer given by Boris D. Teoharov, this is neater (uses jQuery), uses the exact same cursor as the rest of the map (with a passable fall-back), and still allows the cursor to change over markers:

CSS:

.moving div { cursor: url('https://maps.gstatic./mapfiles/openhand_8_8.cur'), grab; }

JS:

map.data.addListener('mouseover', function() {
    $('#map-container-id').addClass('moving');
});

map.data.addListener('mouseout', function() {
    $('#map-container-id').removeClass('moving');
});

You can set a CSS cursor !important on the div #map, but it always overrides your custom cursor.

#map div
{
    cursor: url("your.url.to.cursor.png"), default !important;
}

map.getDiv() can be used to implement this.

const polygon = new window.google.maps.Polygon({ map: map, clickable: true });
window.google.maps.event.addListener(polygon, 'mousemove', e => {
    map.getDiv().firstChild.firstChild.childNodes[1].style.cursor = 'copy';
});

on mouse event for polybon and map do this:
cursor over map:

document.getElementById("map").children[0].children[0].style.cursor = 'url(res/end.png), auto';

cursor over polygon:

document.getElementById("map").style.cursor = 'url(res/end.png), auto';