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

Revisions

  1. Daan-Grashoff revised this gist Dec 10, 2024. 2 changed files with 179 additions and 47 deletions.
    76 changes: 76 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,76 @@
    # 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](https://www.tampermonkey.net/) (Recommended)
    - [Greasemonkey](https://www.greasespot.net/)
    - [Violentmonkey](https://violentmonkey.github.io/)

    2. Install the script:
    - Click [here](https://gist.github.com/Daan-Grashoff/57c40bc355bcb4d1ebc1290094f57ddf/raw/googlemaps.user.js) 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](LICENSE) file for details.

    ## Author

    **Daan Grashoff**
    - GitHub: [Daan-Grashoff](https://github.com/Daan-Grashoff)
    - Gist: [Original Script](https://gist.github.com/Daan-Grashoff/57c40bc355bcb4d1ebc1290094f57ddf)

    ## 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
    150 changes: 103 additions & 47 deletions google_search_maps_addon.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,58 +3,114 @@
    // @namespace http://tampermonkey.net/
    // @version 2024-03-21
    // @description Bring google maps button back
    // @author You
    // @match https://www.google.com/search*
    // @include https://www.google.tld/search*
    // @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';

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

    // If tabs exist, proceed
    if (tabsContainer) {
    // Create the Maps button elements (updated)
    const mapsListItem = document.createElement('div');
    mapsListItem.jsname = 'VIftV';
    // mapsListItem.classList.add('Ap1Qsc');
    mapsListItem.setAttribute('role', 'listitem');

    // Replace this entire section with the provided <a> element
    const mapsButton = document.createElement('a');
    mapsButton.jsname = "ONH4Gc";
    mapsButton.classList.add("LatpMc");
    mapsButton.classList.add("nPDzT");
    mapsButton.classList.add("T3FoJb");
    mapsButton.dataset.navigation = "server"; // Update the attribute name
    mapsButton.dataset.hveid = "CAEQCA";
    // 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 = `//maps.google.com/maps?q=${searchQuery}`;
    mapsButton.href = mapsLink;

    //mapsButton.textContent = "Maps"; // Set the inner text
    const mapsButtonText = document.createElement('div');
    mapsButtonText.jsname = "bVqjv";
    mapsButtonText.classList.add("YmvwI");
    mapsButtonText.textContent = "Maps";
    mapsButton.appendChild(mapsButtonText);

    // Append the mapsButton to the list item
    mapsListItem.appendChild(mapsButton);

    // Insert the Maps button at the beginning of the tabs container
    tabsContainer.prepend(mapsListItem);
    'use strict';

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

    // Call the function to add the button
    addMapsButton();
    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);
    })();
  2. Daan-Grashoff revised this gist Mar 21, 2024. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions google_search_maps_addon.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,9 @@
    // @version 2024-03-21
    // @description Bring google maps button back
    // @author You
    // @match https://www.google.com/*
    // @icon https://www.google.com/
    // @match https://www.google.com/search*
    // @include https://www.google.tld/search*
    // @icon https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png
    // @grant none
    // ==/UserScript==

  3. Daan-Grashoff revised this gist Mar 21, 2024. 1 changed file with 8 additions and 4 deletions.
    12 changes: 8 additions & 4 deletions google_search_maps_addon.js
    View file
    Original file line number Diff line number Diff line change
    @@ -32,14 +32,18 @@
    mapsButton.classList.add("T3FoJb");
    mapsButton.dataset.navigation = "server"; // Update the attribute name
    mapsButton.dataset.hveid = "CAEQCA";
    mapsButton.href = "//maps.google.com/maps?q=sligro&source=lmns&entry=mt&bih=999&biw=1758&prmd=isnvbz&hl=en";
    mapsButton.ping = "/url?sa=t&source=web&rct=j&url=//maps.google.com/maps?q%3Dsligro%26source%3Dlmns%26entry%3Dmt%26bih%3D999%26biw%3D1758%26prmd%3Disnvbz%26hl%3Den&ved=2ahUKEwjluuaFof6EAxXBv_0HHZlMCckQi6AMKAN6BAgBEAg&opi=89978449";
    // mapsButton.textContent = "Maps"; // Set the inner text
    // 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 = `//maps.google.com/maps?q=${searchQuery}`;
    mapsButton.href = mapsLink;

    //mapsButton.textContent = "Maps"; // Set the inner text
    const mapsButtonText = document.createElement('div');
    mapsButtonText.jsname = "bVqjv";
    mapsButtonText.classList.add("YmvwI");
    mapsButtonText.textContent = "Maps";

    mapsButton.appendChild(mapsButtonText);

    // Append the mapsButton to the list item
  4. Daan-Grashoff revised this gist Mar 21, 2024. 1 changed file with 43 additions and 42 deletions.
    85 changes: 43 additions & 42 deletions google_search_maps_addon.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,54 +1,55 @@
    // ==UserScript==
    // @name Google maps addon
    // @namespace http://tampermonkey.net/
    // @version 2024-02-13
    // @version 2024-03-21
    // @description Bring google maps button back
    // @author You
    // @match https://www.google.com/*
    // @icon https://www.google.com/
    // @grant none
    // ==/UserScript==

    (function () {
    'use strict';

    function addMapsButton() {
    // Find the existing results tabs (Images, News, etc.)
    const tabsContainer = document.querySelector('.IUOThf');

    // If tabs exist, proceed
    if (tabsContainer) {
    // Create the Maps button
    const mapsButton = document.createElement('a');
    mapsButton.classList.add('nPDzT', 'T3FoJb'); // Style to match other tabs

    // Create the inner elements for the Maps button
    const mapDiv = document.createElement('div');
    mapDiv.jsname = 'bVqjv';
    mapDiv.classList.add('GKS7s');

    const mapSpan = document.createElement('span');
    mapSpan.classList.add('FMKtTb', 'UqcIvb');
    mapSpan.jsname = 'pIvPIe';
    mapSpan.textContent = 'Maps';

    // Assemble the elements
    mapDiv.appendChild(mapSpan);
    mapsButton.appendChild(mapDiv);

    // 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 = `http://maps.google.com/maps?q=${searchQuery}`;
    mapsButton.href = mapsLink;

    // Insert the Maps button at the beginning of the tabs container
    tabsContainer.prepend(mapsButton);
    }
    (function() {
    'use strict';

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

    // If tabs exist, proceed
    if (tabsContainer) {
    // Create the Maps button elements (updated)
    const mapsListItem = document.createElement('div');
    mapsListItem.jsname = 'VIftV';
    // mapsListItem.classList.add('Ap1Qsc');
    mapsListItem.setAttribute('role', 'listitem');

    // Replace this entire section with the provided <a> element
    const mapsButton = document.createElement('a');
    mapsButton.jsname = "ONH4Gc";
    mapsButton.classList.add("LatpMc");
    mapsButton.classList.add("nPDzT");
    mapsButton.classList.add("T3FoJb");
    mapsButton.dataset.navigation = "server"; // Update the attribute name
    mapsButton.dataset.hveid = "CAEQCA";
    mapsButton.href = "//maps.google.com/maps?q=sligro&source=lmns&entry=mt&bih=999&biw=1758&prmd=isnvbz&hl=en";
    mapsButton.ping = "/url?sa=t&source=web&rct=j&url=//maps.google.com/maps?q%3Dsligro%26source%3Dlmns%26entry%3Dmt%26bih%3D999%26biw%3D1758%26prmd%3Disnvbz%26hl%3Den&ved=2ahUKEwjluuaFof6EAxXBv_0HHZlMCckQi6AMKAN6BAgBEAg&opi=89978449";
    // mapsButton.textContent = "Maps"; // Set the inner text
    const mapsButtonText = document.createElement('div');
    mapsButtonText.jsname = "bVqjv";
    mapsButtonText.classList.add("YmvwI");
    mapsButtonText.textContent = "Maps";

    mapsButton.appendChild(mapsButtonText);

    // Append the mapsButton to the list item
    mapsListItem.appendChild(mapsButton);

    // Insert the Maps button at the beginning of the tabs container
    tabsContainer.prepend(mapsListItem);
    }
    }

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

    })();
    // Call the function to add the button
    addMapsButton();
    })();
  5. Daan-Grashoff created this gist Feb 13, 2024.
    54 changes: 54 additions & 0 deletions google_search_maps_addon.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    // ==UserScript==
    // @name Google maps addon
    // @namespace http://tampermonkey.net/
    // @version 2024-02-13
    // @description Bring google maps button back
    // @author You
    // @match https://www.google.com/*
    // @icon https://www.google.com/
    // @grant none
    // ==/UserScript==

    (function () {
    'use strict';

    function addMapsButton() {
    // Find the existing results tabs (Images, News, etc.)
    const tabsContainer = document.querySelector('.IUOThf');

    // If tabs exist, proceed
    if (tabsContainer) {
    // Create the Maps button
    const mapsButton = document.createElement('a');
    mapsButton.classList.add('nPDzT', 'T3FoJb'); // Style to match other tabs

    // Create the inner elements for the Maps button
    const mapDiv = document.createElement('div');
    mapDiv.jsname = 'bVqjv';
    mapDiv.classList.add('GKS7s');

    const mapSpan = document.createElement('span');
    mapSpan.classList.add('FMKtTb', 'UqcIvb');
    mapSpan.jsname = 'pIvPIe';
    mapSpan.textContent = 'Maps';

    // Assemble the elements
    mapDiv.appendChild(mapSpan);
    mapsButton.appendChild(mapDiv);

    // 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 = `http://maps.google.com/maps?q=${searchQuery}`;
    mapsButton.href = mapsLink;

    // Insert the Maps button at the beginning of the tabs container
    tabsContainer.prepend(mapsButton);
    }
    }

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

    })();