Bring back the google maps button when searching on google

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:

   • Tampermonkey (Recommended)
   • Greasemonkey
   • Violentmonkey

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

• GitHub: Daan-Grashoff
• Gist: Original Script

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

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);
})();

Sweet :)

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();
})();

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

I believe this should be the selector on line 18.

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

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

@mimoklef nice! works like a charm!

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!

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.

^