Bring back the google maps button and make map image clickable when searching on google

README.md

Try out this up-to-date version:

https://github.com/mimoklef/Search-Google-Maps-Back

Google Search Maps Fix

Bring back the "Maps" button and make some map tiles clickable again.

How to install

1. Install a userscript addon like Violentmonkey
2. Click HERE to install the user script

google_search_maps_addon.user.js

// ==UserScript==
// @name         Google Search Maps Fix
// @namespace    http://tampermonkey.net/
// @version      2024-06-05
// @description  Bring Google maps button back (originally based off of Daan Grashoff's script)
// @author       Delivator
// @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==

(function() {
    'use strict';

    function addMapsLink() {
        // 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 = `${window.location.origin}/maps?q=${searchQuery}`;

        // Select the menu container and map
        const menuContainer = document.querySelector('.crJ18e > div[role="list"]');
        const mapImage = document.querySelector('#lu_map, #dimg_95');
        
        if (menuContainer) {
            // Create a new list item div
            const listItem = document.createElement('div');
            listItem.setAttribute('role', 'listitem');

            // Create the link element
            const link = document.createElement('a');
            link.href = mapsLink;
            link.className = 'nPDzT T3FoJb';
            link.setAttribute('jsname', 'VIftV');
            link.setAttribute('role', 'link');

            // Create the inner text div
            const innerTextDiv = document.createElement('div');
            innerTextDiv.setAttribute('jsname', 'bVqjv');
            innerTextDiv.className = 'YmvwI';
            innerTextDiv.textContent = 'Maps';

            // Append the inner text div to the link
            link.appendChild(innerTextDiv);

            // Append the link to the list item
            listItem.appendChild(link);

            // Insert the new list item as the second-to-last element
            if (menuContainer.children.length > 1) {
                menuContainer.insertBefore(listItem, menuContainer.children[menuContainer.children.length - 1]);
            } else {
                menuContainer.appendChild(listItem);
            }
        }

        if (mapImage) {
            // Create a new anchor element for map element
            const anchorElement = document.createElement('a');
            anchorElement.href = mapsLink;
            mapImage.parentNode.insertBefore(anchorElement, mapImage);
            anchorElement.appendChild(mapImage);
        }
    }

    // Run the function to add the Maps link when the page loads
    window.addEventListener('load', addMapsLink);
})();

been using a mash of the codes of different authors (@Daan-Grashoff, @Delivator, @MoridinBG) sprinkled with some chatgpt cause i dont know js at all, been broken for a couple weeks now. Hope they can tell me how to fix it :p

Code:

(function () {

    'use strict';

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

        // The map sometimes is a thumbnail on the right and sometimes a larger image on top of the results
        var mapImage = document.querySelector('.Lx2b0d');
        if (mapImage == null) {
            mapImage = document.querySelector('.dirs');
        }

        // 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 = `${window.location.origin}/maps?q=${searchQuery}`;

        // If map image exists
        if (mapImage) {
            const anchorElement = document.createElement('a');
            anchorElement.href = mapsLink;
            mapImage.parentNode.insertBefore(anchorElement, mapImage);
            anchorElement.appendChild(mapImage);
        }

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

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

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

            // Assemble the elements
            mapDivL.appendChild(mapSpanL);
            mapsButtonL.appendChild(mapDivL);
            mapsButtonL.href = mapsLink;

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

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

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

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

            // Assemble the elements
            mapDivT.appendChild(mapSpanT);
            mapsButtonT.appendChild(mapDivT);
            mapsButtonT.href = mapsLink;

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

    }

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

})();

hi @Xornop , can you tell me what exactly is broken? For me it still works that the "Maps" tab is added but clicking on the map sometimes doesnt work.

@Delivator yeah same for me, thats my issue. I dont use the maps tab, just in cases where it doesnt give me a minimap when i think it should have

Actually i realized my code works still, probably a PEBKAC error on my end

Anyone finding this, check out this script: https://github.com/mimoklef/Search-Google-Maps-Back