Bring back the google maps button when searching on google

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       You
// @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 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);
    }
  }

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

@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