☰

GeoGuessr Hide Overlays

j for hiding all overlays, h for only hiding the map, g for only showing map and compass

As of 2025-08-10. See the latest version.

// ==UserScript==
// @name         GeoGuessr Hide Overlays
// @namespace    https://greasyfork.org/en/users/1501889
// @version      16.1
// @description  j for hiding all overlays, h for only hiding the map, g for only showing map and compass
// @author       Clemens
// @match        https://www.geoguessr.com/*
// @icon         https://www.google.com/s2/favicons?domain=geoguessr.com
// @run-at       document-idle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const localStorageKeyOverlaysHidden = 'geoguessr_overlays_hidden_v2';
    const localStorageKeyMapHidden = 'geoguessr_map_hidden_v2';
    const localStorageKeyMinimalView = 'geoguessr_minimal_view';

    const mapSelector = 'div[data-qa="guess-map"]';
    const compassSelector = '.panorama-compass_compassContainer__VAYam';
    const allOverlaysSelector = [
        '.game_status___YFni',
        '.game_controls__xgq6p',
        '.game_inGameLogos__T9d3L',
        '.panorama-compass_compassContainer__VAYam',
        'img[alt="Google Maps Logo"]',
        'div[style*="position: absolute; right: 0px; bottom: 0px;"] .gmnoprint',
        '.duels-panorama_controls___OEib'
    ];

    const minimalViewSelectors = [
        '.game_status___YFni',
        '.game_controls__xgq6p',
        '.game_inGameLogos__T9d3L',
        'img[alt="Google Maps Logo"]',
        'div[style*="position: absolute; right: 0px; bottom: 0px;"] .gmnoprint',
        '.duels-panorama_controls___OEib'
    ];

    const toggleNonMapOverlays = (forceHide) => {
        const overlays = Array.from(document.querySelectorAll(allOverlaysSelector.join(', ')));
        if (overlays.length > 0) {
            const isCurrentlyHidden = localStorage.getItem(localStorageKeyOverlaysHidden) === 'true';
            const shouldBeHidden = (forceHide !== undefined) ? forceHide : !isCurrentlyHidden;
            const displayStyle = shouldBeHidden ? 'none' : '';
            overlays.forEach(overlay => { overlay.style.display = displayStyle; });
            localStorage.setItem(localStorageKeyOverlaysHidden, shouldBeHidden.toString());
            localStorage.setItem(localStorageKeyMinimalView, 'false');
        }
    };

    const toggleMap = (forceHide) => {
        const mapContainer = document.querySelector(mapSelector);
        if (mapContainer) {
            const isCurrentlyHidden = localStorage.getItem(localStorageKeyMapHidden) === 'true';
            const shouldBeHidden = (forceHide !== undefined) ? forceHide : !isCurrentlyHidden;
            const displayStyle = shouldBeHidden ? 'none' : '';
            mapContainer.style.display = displayStyle;
            localStorage.setItem(localStorageKeyMapHidden, shouldBeHidden.toString());
            localStorage.setItem(localStorageKeyMinimalView, 'false');
        }
    };

    const toggleMinimalView = () => {
        const isMinimalView = localStorage.getItem(localStorageKeyMinimalView) === 'true';
        const newMinimalViewState = !isMinimalView;

        const minimalOverlays = Array.from(document.querySelectorAll(minimalViewSelectors.join(', ')));
        minimalOverlays.forEach(overlay => {
    if (!overlay.classList.contains('panorama-compass_compassContainer__VAYam')) {
        overlay.style.display = newMinimalViewState ? 'none' : '';
    }
});

        const mapContainer = document.querySelector(mapSelector);
        if (mapContainer) {
            mapContainer.style.display = newMinimalViewState ? '' : localStorage.getItem(localStorageKeyMapHidden) === 'true' ? 'none' : '';
        }

        const compass = document.querySelector(compassSelector);
        if (compass) {
            compass.style.display = newMinimalViewState ? '' : '';
        }

        localStorage.setItem(localStorageKeyMinimalView, newMinimalViewState.toString());
        localStorage.setItem(localStorageKeyOverlaysHidden, 'false');
        localStorage.setItem(localStorageKeyMapHidden, 'false');
    };


    const applySavedPreference = () => {
        const nonMapOverlaysHidden = localStorage.getItem(localStorageKeyOverlaysHidden) === 'true';
        const mapHidden = localStorage.getItem(localStorageKeyMapHidden) === 'true';
        const isMinimalView = localStorage.getItem(localStorageKeyMinimalView) === 'true';

        if (isMinimalView) {
            const minimalOverlays = Array.from(document.querySelectorAll(minimalViewSelectors.join(', ')));
            minimalOverlays.forEach(overlay => {
                if (!overlay.classList.contains('panorama-compass_compassContainer__VAYam')) {
                    overlay.style.display = 'none';
                }
            });
            const mapContainer = document.querySelector(mapSelector);
            if (mapContainer) {
                mapContainer.style.display = '';
            }
            const compass = document.querySelector(compassSelector);
            if (compass) {
                compass.style.display = '';
            }
        } else {
            const allOverlays = Array.from(document.querySelectorAll(allOverlaysSelector.join(', ')));
            allOverlays.forEach(overlay => {
                overlay.style.display = nonMapOverlaysHidden ? 'none' : '';
            });

            const mapContainer = document.querySelector(mapSelector);
            if (mapContainer) {
                mapContainer.style.display = mapHidden ? 'none' : '';
            }
        }
    };

    const observer = new MutationObserver((mutationsList, observer) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                const mapElement = document.querySelector(mapSelector);
                const nonMapOverlayElement = document.querySelector(allOverlaysSelector.join(', '));
                if (mapElement || nonMapOverlayElement) {
                    applySavedPreference();
                }
            }
        }
    });

    document.addEventListener('keydown', (event) => {
        if (event.key === 'h' || event.key === 'j' || event.key === 'g') {
            event.preventDefault();
        }

        if (event.key === 'h') {
            toggleMap();
        }

        if (event.key === 'j') {
            const nonMapOverlaysHidden = localStorage.getItem(localStorageKeyOverlaysHidden) === 'true';
            const newNonMapState = !nonMapOverlaysHidden;

            toggleNonMapOverlays(newNonMapState);
            toggleMap(newNonMapState);
        }

        if (event.key === 'g') {
            toggleMinimalView();
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    applySavedPreference();
})();