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

@Daan-Grashoff

@ this line underneath the @match to support google.nl

// @match https://www.google.nl/*

Thanks for this code. I will create a chrome plugin from it.
However, it's not just about Maps. Google Flight used to appear directly...but this is no longer the case in EU. :(

I had to change the line 43 to this, but thanks, it works great!

const mapsLink = https://www.google.com/maps/search/?api=1&query=${searchQuery}

I had to change the line 43 to this, but thanks, it works great!

const mapsLink = https://www.google.com/maps/search/?api=1&query=${searchQuery}

this worked good

Thansk a lot! Fixed a few things like supporting local domains instead of just .com and also made the map image clickable.
https://gist.github.com/Delivator/cbb71fc770b11b02b4269f26d65ce145

Thansk a lot! Fixed a few things like supporting local domains instead of just .com and also made the map image clickable. https://gist.github.com/Delivator/cbb71fc770b11b02b4269f26d65ce145

Thanks to both !

Google changed the UI, So I updated the script

Nice! Thanks!

Works great, thx a lot! :)

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.

@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 :

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) :

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

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.

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

@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

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.

^