Skip to content

Instantly share code, notes, and snippets.

@Daan-Grashoff

Daan-Grashoff/README.md

Last active October 27, 2025 14:22
Show Gist options
  • Save Daan-Grashoff/57c40bc355bcb4d1ebc1290094f57ddf to your computer and use it in GitHub Desktop.
Save Daan-Grashoff/57c40bc355bcb4d1ebc1290094f57ddf to your computer and use it in GitHub Desktop.
Download ZIP
Bring back the google maps button when searching on google
Raw
README.md

Google Maps Button Restorer

This userscript brings back the Maps button in Google Search results, making it easy to search locations directly in Google Maps.

Features

  • Adds a Maps button next to the "All", "Images", "News" tabs in Google Search
  • Works across multiple Google domains (.com, .co.uk, .nl, .de, .fr)
  • Automatically updates when using Google's dynamic search
  • Maintains button presence during navigation
  • Clean integration with Google's native UI

Installation

  1. Install a userscript manager:

  2. Install the script:

    • Click here to install directly
    • Or create a new script in your userscript manager and copy the contents of googlemaps.js

Usage

  1. Perform a search on Google
  2. The Maps button will appear automatically in the navigation bar
  3. Click the Maps button to search for your query in Google Maps

Supported Domains

  • google.com
  • google.co.uk
  • google.nl
  • google.de
  • google.fr
  • Other Google domains should work as well

Debug Mode

The script includes a debug mode that logs operations to the browser console:

  1. Open browser DevTools (F12)
  2. Go to Console tab
  3. Look for messages prefixed with [Maps Button]

To disable debug logging, set DEBUG = false in the script.

Contributing

Feel free to submit issues and enhancement requests!

  1. Fork the repository
  2. Create your feature branch
  3. Commit your changes
  4. Push to the branch
  5. Create a new Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Daan Grashoff

Changelog

Version 2024-12-10

  • Initial release
  • Added support for multiple Google domains
  • Added debug logging
  • Added periodic checks for button presence
  • Added dynamic navigation support
Raw
google_search_maps_addon.js
// ==UserScript==
// @name Google maps addon
// @namespace http://tampermonkey.net/
// @version 2024-03-21
// @description Bring google maps button back
// @author Daan Grashoff
// @homepage https://gist.github.com/Daan-Grashoff/57c40bc355bcb4d1ebc1290094f57ddf
// @match *://www.google.com/search*
// @match *://google.com/search*
// @match *://www.google.co.uk/search*
// @match *://www.google.nl/search*
// @match *://www.google.de/search*
// @match *://www.google.fr/search*
// @match *://www.google.tld/search*
// @run-at document-start
// @icon https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png
// @grant none
// ==/UserScript==
(function() {
'use strict';
const DEBUG = true;
function log(...args) {
if (DEBUG) console.log('[Maps Button]', ...args);
}
function addMapsButton() {
log('Attempting to add Maps button...');
// Find the navigation container using multiple possible selectors
const possibleContainers = [
document.querySelector('div[role="navigation"] div[role="list"]'),
document.querySelector('.MUFPAc'),
document.querySelector('.nfdoRb'),
document.querySelector('.T47uwc'),
document.querySelector('.NZmxZe'),
document.querySelector('.crJ18e')
];
const tabsContainer = possibleContainers.find(el => el !== null);
if (!tabsContainer) {
log('No navigation container found');
return;
}
// Check if Maps button already exists
if (tabsContainer.querySelector('.maps-button-custom')) {
log('Maps button already exists');
return;
}
// Get the search query
const searchQuery = new URLSearchParams(window.location.search).get('q');
if (!searchQuery) {
log('No search query found');
return;
}
// Create Maps button
const mapsListItem = document.createElement('div');
mapsListItem.setAttribute('role', 'listitem');
mapsListItem.classList.add('maps-button-custom');
const mapsButton = document.createElement('a');
mapsButton.classList.add('nPDzT');
mapsButton.classList.add('T3FoJb');
mapsButton.href = `https://www.google.com/maps/search/${encodeURIComponent(searchQuery)}`;
const mapsButtonText = document.createElement('div');
mapsButtonText.classList.add('YmvwI');
mapsButtonText.textContent = 'Maps';
mapsButton.appendChild(mapsButtonText);
mapsListItem.appendChild(mapsButton);
// Find the best insertion point
const allTab = tabsContainer.querySelector('[aria-current="page"]')?.closest('[role="listitem"]') ||
tabsContainer.querySelector('[role="listitem"]');
if (allTab?.nextSibling) {
tabsContainer.insertBefore(mapsListItem, allTab.nextSibling);
} else {
tabsContainer.appendChild(mapsListItem);
}
log('Maps button added successfully');
}
// Initial load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', addMapsButton);
} else {
addMapsButton();
}
// Watch for URL changes (Google's dynamic navigation)
let lastUrl = location.href;
const observer = new MutationObserver(() => {
const currentUrl = location.href;
if (currentUrl !== lastUrl) {
lastUrl = currentUrl;
setTimeout(addMapsButton, 100);
}
});
observer.observe(document, { subtree: true, childList: true });
// Periodic check to ensure button stays present
setInterval(() => {
const hasButton = document.querySelector('.maps-button-custom');
if (!hasButton) {
log('Periodic check - attempting to add button');
addMapsButton();
}
}, 2000);
})();
@khroompleeh
Copy link

Nice! Thanks!

@nightsparc
Copy link

Works great, thx a lot! :)

@kubinka0505
Copy link

Can I ask to add a variable determining the position of the Maps button?

As far as I know, the Maps button was after Everything.

obraz

@meGAmeS1
Copy link

meGAmeS1 commented Apr 3, 2024

@kubinka0505
You need to replace line 54 (tabsContainer.prepend(mapsListItem);) with one of these :

If you want it to be second to last as such :
image

tabsContainer.insertBefore(mapsListItem,tabsContainer.children[tabsContainer.children.length - 1]);

If you want it to be at a given position (for example the second position, so position 1 since you count from 0) :
image

tabsContainer.insertBefore(mapsListItem,tabsContainer.children[1]);

@hamitozdemir
Copy link

hamitozdemir commented Apr 11, 2024 •
edited
Loading

If you rename the file to .user.js when opening raw Tampermonkey automatically detects it's a userscript you're trying to install and directly opens up an "installation" tab, rather than needing to manually copy-paste. Appreciate the bringing back of Google Maps.

@juhorepository
Copy link

noobie q, sorry: how do i install this (to Firefox)?

@meGAmeS1
Copy link

@juhorepository You need the extension "Tampermonkey" and then install this script (to do so: click on the Tampermonkey icon in the extension toolbar of Firefox -> "Create a new Script" and copy-paste the script above

@wardboumans
Copy link

Sweet :)

@Gabriele-LS
Copy link

Gabriele-LS commented May 11, 2024 •
edited
Loading

Thank you very much, @Daan-Grashoff, for writing this script. I adjusted it to make it compatible with different Google styles. Here is my code. I hope it could help.

// ==UserScript==
// @name         Google Maps Addon
// @namespace    http://tampermonkey.net/
// @version      2024-05-11
// @description  Bring Google Maps Button Back
// @author       You
// @include      https://www.google.tld/search*
// @icon         https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function addMapsButton() {
        // Find the list container of existing tabs
        const tabsContainer = document.querySelector('.crJ18e').firstChild;

        // If tabs exist, proceed
        if (tabsContainer) {
            // Get the search query from the URL
            const searchQuery = new URLSearchParams(window.location.search).get('q');

            // Construct the Maps link with the query
            const mapsLink = `//www.google.com/maps/?q=${searchQuery}`;

            // Create the <div> element
            const mapsListItem = document.createElement('div');
            mapsListItem.setAttribute('role', 'listitem');

            // Create the <a> element
            var existing_a_elements_classes = tabsContainer.children[1].firstChild.getAttribute("class");
            var existing_a_elements_jsname = tabsContainer.children[1].firstChild.getAttribute("jsname");
            var existing_a_elements_role = tabsContainer.children[1].firstChild.getAttribute("role");

            const mapsButton = document.createElement('a');
            mapsButton.href = mapsLink;
            mapsButton.setAttribute("class", existing_a_elements_classes);
            mapsButton.setAttribute("jsname", existing_a_elements_jsname);
            mapsButton.setAttribute("role", existing_a_elements_role);

            // Set the <div> element
            var existing_div_elements_classes = tabsContainer.children[1].firstChild.firstChild.getAttribute("class");
            var existing_div_elements_jsname = tabsContainer.children[1].firstChild.firstChild.getAttribute("jsname");

            const mapsButtonInnerDiv = document.createElement('div');
            mapsButtonInnerDiv.setAttribute("jsname", existing_div_elements_jsname);
            mapsButtonInnerDiv.setAttribute("class", existing_div_elements_classes);

            // Set the <span> element (if needed)
            var existing_span_element = tabsContainer.children[1].firstChild.firstChild.firstChild;
            if (existing_span_element.tagName == "SPAN") {
                const mapsButtonInnerSpan = document.createElement("span");
                mapsButtonInnerSpan.classList.add("FMKtTb");
                mapsButtonInnerSpan.classList.add("UqcIvb");
                mapsButtonInnerSpan.setAttribute("jsname", "pIvPIe");
                mapsButtonInnerSpan.textContent = "Maps";
                mapsButtonInnerDiv.appendChild(mapsButtonInnerSpan);
            } else {
                mapsButtonInnerDiv.textContent = "Maps";
            }

            mapsButton.appendChild(mapsButtonInnerDiv);
            mapsListItem.appendChild(mapsButton);

            // Insert the Maps button
            tabsContainer.insertBefore(mapsListItem,tabsContainer.children[tabsContainer.children.length - 1]);
        }
    }

    // Call the function to add the button
    addMapsButton();
})();

@Xornop
Copy link

Xornop commented Jun 19, 2024 •
edited
Loading

another git with the same idea, is also broken currently
link

@saxomoose
Copy link

I believe this should be the selector on line 18.

const tabsContainer = document.querySelector('.crJ18e > div[role="list"]');

@mimoklef
Copy link

mimoklef commented Oct 22, 2024 •
edited
Loading

Nice scripts guys

🚀 I juste created a more complete one, which brings back mini maps interaction and Open in maps buttons too 🚀

🔧Here are the links to the repo or directly to the script

@Delivator
Copy link

@mimoklef nice! works like a charm!

@Daan-Grashoff
Copy link
Author

Hi all, I've updated the script to work with Google's latest UI changes.

Key improvements:

  • Added more container selectors to handle UI variations
  • Improved button insertion logic
  • Added periodic checks to ensure the button stays visible
  • Added support for more Google domains
  • Better handling of dynamic navigation

Let me know if you run into any issues!

@Tecfan
Copy link

Tecfan commented Dec 10, 2024

If you rename the file to .user.js when opening raw Tampermonkey automatically detects it's a userscript you're trying to install and directly opens up an "installation" tab, rather than needing to manually copy-paste. Appreciate the bringing back of Google Maps.

^

@EricHannemann
Copy link

Hey, just letting you know that the link for installing directly to Tampermonkey refers to googlemaps.user.js instead of google_search_maps_addon-js.
By the way thanks for this Gist, you rock!

@DuckersMcQuack
Copy link

@Daan-Grashoff For the readme with "click here to install" doesn't work. But if you open the js file as raw, then copy that url, that will work to show it as raw for copy paste. If you find out how to make it actually one click auto install to tampermonkey, do let me know, as i borrowed your code to not add, but remove the short videos tab as it annoyed me that i had GPT cook up.

@Paspox
Copy link

Paspox commented Aug 17, 2025

Thanks a lot for this !
Anyone knows why the Maps button is not aligned with the others ?
image

@meNeither
Copy link

@Paspox Yes, Google has changed the structure. Here is an updated version of the script.

// ==UserScript==
// @name         Google maps addon
// @namespace    http://tampermonkey.net/
// @version      2024-03-21
// @description  Bring google maps button back
// @author       Daan Grashoff
// @homepage     https://gist.github.com/Daan-Grashoff/57c40bc355bcb4d1ebc1290094f57ddf
// @match        *://www.google.com/search*
// @match        *://google.com/search*
// @match        *://www.google.co.uk/search*
// @match        *://www.google.nl/search*
// @match        *://www.google.de/search*
// @match        *://www.google.fr/search*
// @match        *://www.google.tld/search*
// @run-at       document-start
// @icon         https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const DEBUG = true;
    function log(...args) {
        if (DEBUG) console.log('[Maps Button]', ...args);
    }

    function addMapsButton() {
        log('Attempting to add Maps button...');

        // Find the navigation container using multiple possible selectors
        const possibleContainers = [
            document.querySelector('div[role="navigation"] div[role="list"]'),
            document.querySelector('.MUFPAc'),
            document.querySelector('.nfdoRb'),
            document.querySelector('.T47uwc'),
            document.querySelector('.NZmxZe'),
            document.querySelector('.crJ18e')
        ];

        const tabsContainer = possibleContainers.find(el => el !== null);
        if (!tabsContainer) {
            log('No navigation container found');
            return;
        }

        // Check if Maps button already exists
        if (tabsContainer.querySelector('.maps-button-custom')) {
            log('Maps button already exists');
            return;
        }

        // Get the search query
        const searchQuery = new URLSearchParams(window.location.search).get('q');
        if (!searchQuery) {
            log('No search query found');
            return;
        }

        // Create Maps button
        const mapsListItem = document.createElement('div');
        mapsListItem.setAttribute('role', 'listitem');
        mapsListItem.classList.add('maps-button-custom');

        const mapsButton = document.createElement('a');
        mapsButton.classList.add('nPDzT');
        mapsButton.classList.add('T3FoJb');
        mapsButton.href = `https://www.google.com/maps/search/${encodeURIComponent(searchQuery)}`;

        const mapsButtonTextWrapper = document.createElement('div');
        mapsButtonTextWrapper.classList.add('mXwfNd');

        const mapsButtonText = document.createElement('span');
        mapsButtonText.classList.add('R1QWuf');
        mapsButtonText.textContent = 'Maps';

        mapsButtonTextWrapper.appendChild(mapsButtonText);
        mapsButton.appendChild(mapsButtonTextWrapper);
        mapsListItem.appendChild(mapsButton);

        // Find the best insertion point
        const allTab = tabsContainer.querySelector('[aria-current="page"]')?.closest('[role="listitem"]') ||
                      tabsContainer.querySelector('[role="listitem"]');

        if (allTab?.nextSibling) {
            tabsContainer.insertBefore(mapsListItem, allTab.nextSibling);
        } else {
            tabsContainer.appendChild(mapsListItem);
        }

        log('Maps button added successfully');
    }

    // Initial load
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', addMapsButton);
    } else {
        addMapsButton();
    }

    // Watch for URL changes (Google's dynamic navigation)
    let lastUrl = location.href;
    const observer = new MutationObserver(() => {
        const currentUrl = location.href;
        if (currentUrl !== lastUrl) {
            lastUrl = currentUrl;
            setTimeout(addMapsButton, 100);
        }
    });

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

    // Periodic check to ensure button stays present
    setInterval(() => {
        const hasButton = document.querySelector('.maps-button-custom');
        if (!hasButton) {
            log('Periodic check - attempting to add button');
            addMapsButton();
        }
    }, 2000);
})();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment