omnidevZero / Old-Google-Logos-And-Icons

2 stars 1 forks source link

Google Maps #2

Closed Artem13327 closed 10 months ago

toydotgame commented 3 months ago

If anyone stumbles across this issue and wishes to have roughly 2012-era-appropriate Google Maps, you can run this code in the console or as a userscript for *://www.google.*/maps*:

// Generic function to run a piece of code once a given querySelector is found in the DOM
function RunWhenReady(selector, code) {
    var loadedElement, isLoaded;
    function GetLoadedElement(mutationInstance = null) {
        try {
            loadedElement = document.querySelector(selector)
        } catch(TypeError) {}
        if(loadedElement != null) {
            code(loadedElement);
            if(mutationInstance != null) { // Running in observer:
                mutationInstance.disconnect();
            } else { // Running in function scope:
                isLoaded = true;
            }
        }
    }

    GetLoadedElement(); // Run check if the element has loaded before the observer can start
    if(isLoaded)
        return;

    var observer = new MutationObserver(function (mutations, mutationInstance) {
        GetLoadedElement(mutationInstance);
    });
    observer.observe(document, {childList: true, subtree: true});
}

// Inject CSS to replace logos on the page:
var styleElement = document.createElement("style");
styleElement.appendChild(document.createTextNode(`
    .watermark { /* Map view watermark */
        content: url("https://raw.githubusercontent.com/toydotgame/old-google/main/resources/google/logos/maps_watermark.png");
    }
    .watermark.nTFmr { /* Satellite view watermark */
        content: url("https://raw.githubusercontent.com/toydotgame/old-google/main/resources/google/logos/maps_watermark_mono.png");
    }
    .lmygoc { /* Drawer logo */
        content: url("https://raw.githubusercontent.com/toydotgame/old-google/main/resources/google/logos/maps.png");
    }
    #splash-logo {
        background: url("https://raw.githubusercontent.com/toydotgame/old-google/main/resources/google/logos/maps_watermark_mono.png") no-repeat center;
        background-size: 324px;
    }
`));
RunWhenReady("body", function(loadedElement) {
    document.head.append(styleElement);
});

// Inject a `<link>` tag to change the favicon:
RunWhenReady('link[rel="shortcut icon"', function(loadedElement) {
    var faviconElement = Object.assign(
        document.createElement("link"),
        {rel: "icon", href: "https://raw.githubusercontent.com/toydotgame/old-google/main/resources/google/favicons/maps.ico"}
    );
    document.head.append(faviconElement);
});

(Adapted from my code for my own old google logo addon here)