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.
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.com/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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With