Replace default mouse icon maps

Question

I am able to replace the mouse cursor in gmail following the solution in stack overflow.

This same solution works in maps like google maps.

However, it seems not to work in maps that have the cursor style within <div> ... </div>.

An example of those map is this one.

I tried to create a new div element (similar to style) and append it, but still it does not work.

// Gmail
var styleA = document.createElement('style');
styleA.innerHTML = "[style*='openhand.cur']{ cursor: grab !important; }[style*='closedhand.cur']{ cursor: grabbing !important; }";
// Google Maps
var styleB = document.createElement('style');
styleB.innerHTML = "[style*='openhand_8_8.cur']{ cursor: grab !important; }[style*='closedhand_8_8.cur']{ cursor: grabbing !important; }";

// Apply new styles defined above
document.head.appendChild(styleA);
document.head.appendChild(styleB);

The style that I want to override is the following one:

<div style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; cursor: url(&quot;https://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;), default; touch-action: pan-x pan-y;">

And the JS selector seems to be the following:

document.querySelector("#map > div > div.gm-style > div:nth-child(1)")

What is the correct approach?

Please see How to Ask. You're expected to make an attempt and show your code. — isherwood
– isherwood, Commented May 6 at 13:38

JulesUK · Accepted Answer · 2025-05-06 15:33:21Z

1

Some maps render their cursor styles within elements in ways that don't respond to CSS overrides like your current approach.

You can try a couple of things:

Ok your inline styles take precedence over external stylesheets, simply adding a tag might not work. You can try modifying the elements style property directly using JavaScript. Heres a couple of ways if might work, a jsfiddle may help to allow me to see.

First other way:

// Select the target div
var mapDiv = document.querySelector("#map > div > div.gm-style > div:nth-child(1)");

// Override the cursor style
if (mapDiv) {
    mapDiv.style.cursor = "grab";
}

Or

   var styleOverride = document.createElement('style');
        styleOverride.innerHTML = "#map > div > div.gm-style > div:nth-child(1) { cursor: grab !important; }";
        document.head.appendChild(styleOverride);

Again, similar approaches but my only other way optional is another possible issue is that Google Maps dynamically updates its elements, this will possibly reset your changes. If thats the case, you could use a MutationObserver to detect changes and reapply the cursor style so so:

// Function to update cursor style
    function updateCursor() {
        var mapDiv = document.querySelector("#map > div > div.gm-style > div:nth-child(1)");
        if (mapDiv) {
            mapDiv.style.cursor = "grab";
        }
    }

// Create a MutationObserver
var observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach(() => {
        updateCursor(); // Reapply cursor style when changes occur
    });
});

// Select the parent container that wraps Google Maps
var targetNode = document.querySelector("#map > div");

// Configure observer to detect attribute and child changes
if (targetNode) {
    observer.observe(targetNode, { attributes: true, childList: true, subtree: true });
}

// Run the function initially
updateCursor();

Failing this, I cant think of any other solution, sorry. Good luck and me know if either work

edited May 6 at 15:33

answered May 6 at 14:05

JulesUK

5755 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cacamailg May 6 at 15:07

Unfortunately, your solution does not work. I've tested (injected) the first part in a JS file and the second one in a CSS file, and none of them provided the desired output. I've also edited my question with further information. Thanks.

JulesUK May 6 at 15:35

updated answer to include new options

cacamailg May 6 at 17:19

Thanks. But still no luck.

JulesUK May 6 at 18:18

Try a higher level element like : var observer = new MutationObserver(() => { var mapDiv = document.querySelector("#map > div > div.gm-style > div:nth-child(1)"); if (mapDiv) { mapDiv.style.cursor = "grab"; } }); observer.observe(document.body, { attributes: true, childList: true, subtree: true }); Put a JSFididdle up it will be easier to see what is happening

Collectives™ on Stack Overflow

Replace default mouse icon maps

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related