☰

Search Google Maps Back

This script bring google maps button back, makes search maps (big/mini and micro one) clickable and adds Open in Maps button back. It might not work anymore in a few months and need an update so feel free to update it whenever you want, I'll try to do it whenever I can.

  1. // ==UserScript==
  2. // @name         Search Google Maps Back
  3. // @name:fr      Retour de Google Maps Dans Recherche
  4. // @namespace    http://tampermonkey.net/
  5. // @version      2024-10-22
  6. // @description  This script bring google maps button back, makes search maps (big/mini and micro one) clickable and adds Open in Maps button back. It might not work anymore in a few months and need an update so feel free to update it whenever you want, I'll try to do it whenever I can.
  7. // @description:fr Ce script remet le bouton google maps, rend les cartes de recherche (grandes/mini et micro) cliquables et ajoute le bouton Open in Maps (Ouvrir sur Maps) aux grandes cartes. Il se peut qu'il ne fonctionne plus dans quelques mois et qu'une mise à jour soit nécessaire, alors n'hésitez pas à le mettre à jour quand vous le souhaitez, pour ma part je le ferai dès que possible.
  8. // @author       Mimouy | Mimo (Mohamed) Bouyakhlef : https://github.com/mimouy
  9. // @match        https://www.google.com/search*
  10. // @include      https://www.google.tld/search*
  11. // @icon         https://i.ibb.co/RcMNxV3/gmback.jpg
  12. // @grant        none
  13. // @license MIT
  14.  
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     function addMapsButton() {
  21.  
  22.         // Find the list container of existing tabs
  23.         const tabsContainer = document.querySelector('.crJ18e');
  24.  
  25.         //Get the search query
  26.         const searchQuery = new URLSearchParams(window.location.search).get('q');
  27.  
  28.         //Use the search query as a link
  29.         const mapsLink = `//maps.google.com/maps?q=${searchQuery}`;
  30.  
  31.  
  32.         // Adding the Maps button to the tab if not already in
  33.         if (tabsContainer) {
  34.  
  35.             // Check if already has a Maps button
  36.             let hasGoogleMapsLink = false;
  37.             tabsContainer.querySelectorAll('a').forEach(link => {
  38.                 if (link.href.includes('google.com/maps')) {
  39.                     hasGoogleMapsLink = true;
  40.                 }
  41.             });
  42.             if (hasGoogleMapsLink) {
  43.                 //Already has a Maps button
  44.             } else {
  45.  
  46.                 // Create the Maps button elements (updated)
  47.                 const mapsListItem = document.createElement('div');
  48.                 mapsListItem.jsname = 'VIftV';
  49.                 // mapsListItem.classList.add('Ap1Qsc');
  50.                 mapsListItem.setAttribute('role', 'listitem');
  51.  
  52.                 // Replace this entire section with the provided <a> element
  53.                 const mapsButton = document.createElement('a');
  54.                 mapsButton.href = mapsLink;
  55.                 mapsButton.jsname = "ONH4Gc";
  56.                 mapsButton.classList.add("LatpMc");
  57.                 mapsButton.classList.add("nPDzT");
  58.                 mapsButton.classList.add("T3FoJb");
  59.                 mapsButton.dataset.navigation = "server";
  60.                 mapsButton.dataset.hveid = "CAEQCA";
  61.  
  62.  
  63.                 //mapsButton.textContent = "Maps"; // Set the inner text if need to
  64.                 const mapsButtonText = document.createElement('div');
  65.                 mapsButtonText.jsname = "bVqjv";
  66.                 mapsButtonText.classList.add("YmvwI");
  67.                 mapsButtonText.textContent = "Maps";
  68.                 mapsButton.appendChild(mapsButtonText);
  69.  
  70.                 // Append the mapsButton to the list item
  71.                 mapsListItem.appendChild(mapsButton);
  72.  
  73.                 // Insert the Maps button after the All button
  74.                 const firstTabsChild = tabsContainer.firstElementChild;
  75.                 firstTabsChild.insertBefore(mapsButton, firstTabsChild.children[1]);
  76.  
  77.             }
  78.  
  79.         }
  80.  
  81.  
  82.  
  83.  
  84.         // Find the small map element if any, to map it clickable
  85.         const smallMapElement = document.querySelector('.KY6ERe');
  86.  
  87.         if (smallMapElement) {
  88.             // Look for the links (or div) parent
  89.             const targetElement = smallMapElement.querySelector('.ZqGZZ.xP81Pd');
  90.  
  91.             //Look for the micro map image
  92.             if (targetElement) {
  93.  
  94.                     //Is the mini map image a link ?
  95.                 if (targetElement.tagName.toLowerCase() === 'a') {
  96.                     //Mini map is already a link, nothing to do
  97.                 }else{
  98.  
  99.                     //Create a new Map image which will be a link
  100.                     let newMapImage = document.createElement('a');
  101.                     let parent = targetElement.parentNode;
  102.                     let children = targetElement.childNodes;
  103.                     // Copy all attributes and childs to the newMapImage
  104.                     Array.prototype.forEach.call(targetElement.attributes, function (attr) {
  105.                         newMapImage.setAttribute(attr.name, attr.value);
  106.                     });
  107.                     Array.prototype.forEach.call(children, function (elem) {
  108.                         newMapImage.appendChild(elem);
  109.                     });
  110.                     newMapImage.href = mapsLink;
  111.                     //Replace old image by the new (link) one
  112.                     parent.replaceChild(newMapImage, targetElement);
  113.  
  114.                 }
  115.  
  116.             } else {
  117.                 //
  118.             }
  119.         } else {
  120.             //No small map
  121.         }
  122.  
  123.  
  124.                 // Find the micro map element if any, to make it clickable
  125.         const microMapElement = document.querySelector('.Ggdpnf.kno-fb-ctx');
  126.  
  127.         if (microMapElement) {
  128.             // Look for the link's (which is a div if none) parent
  129.             const microTargetElement = microMapElement.querySelector('* > * > a');
  130.  
  131.             if (microTargetElement) {
  132.  
  133.                 if (microTargetElement.tagName.toLowerCase() === 'a' && microTargetElement.hasAttribute('href')) {
  134.                     //Micro map is already a link, nothing to do
  135.  
  136.                 }else{
  137.                     //Micro map is not a link (do not have a href)
  138.                     microTargetElement.href = mapsLink;
  139.  
  140.                     // Create the Zoom icon div
  141.                     const newDiv = document.createElement('div');
  142.                     newDiv.setAttribute('jscontroller', 'hnlzI');
  143.                     newDiv.setAttribute('class', 'sEtYzd duf-h TUOsUe BSRXQc sxd9Pc');
  144.                     newDiv.setAttribute('jsaction', 'KQB0gd;rcuQ6b:npT2md');
  145.                     newDiv.setAttribute('data-ved', '2ahUKEwjo44_p66CJAxXtFFkFHcHlDIUQkNEBegQIUxAJ');
  146.  
  147.                     // Create img element (zoom icon) inside the div
  148.                     const img = document.createElement('img');
  149.                     img.setAttribute('class', 'kf0xcf oYQBg FIfWIe Tbiej u60jwe');
  150.                     img.setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAgMAAAAog1vUAAAACVBMVEUAAACaoKaaoKZGj4K4AAAAA3RSTlMA/58J4rd5AAAAdUlEQVR4AeXPAQaEYBgG4RGLDhJ7nIVJgI7SJdrzBsA/ABF6AYPH9/GufVRvSsCZNJk0Ny2roTZD7YY6DIWhMBSGwlAYCkMlHYz7k315er2gd+YbYW5aVsZ0bmOa3IcUCkNhKAyFoTAUhsJQGApDofq7Ib1hF4lkK+5yFPqsAAAAAElFTkSuQmCC');
  151.                     img.setAttribute('alt', '');
  152.                     img.setAttribute('height', '24');
  153.                     img.setAttribute('width', '24');
  154.                     img.setAttribute('data-csiid', 'nQAXZ6ihIe2p5NoPwcuzqAg_9');
  155.                     img.setAttribute('data-atf', '0');
  156.                     newDiv.style.cssText = `
  157.                     background-color: rgba(48, 49, 52, 0.8);
  158.                     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  159.                     height: 32px;
  160.                     width: 32px;
  161.                     display: block;
  162.                     outline: 0;
  163.                     position: absolute;
  164.                     top: 4px;
  165.                     vertical-align: middle;
  166.                     right: 4px;
  167.                     `;
  168.  
  169.                     // Append the img to the Zoom div
  170.                     newDiv.appendChild(img);
  171.                     // Find the gImg element
  172.                     const gImgElement = microTargetElement.querySelector('g-img');
  173.  
  174.                     // Insert the zoom icon right after the gImh element so it shows on it (top right)
  175.                     if (gImgElement) {
  176.                         gImgElement.parentNode.insertBefore(newDiv, gImgElement.nextSibling);
  177.                     } else {
  178.                         //no gImg found !?
  179.                     }
  180.  
  181.                 }
  182.  
  183.             } else {
  184.                 //Didn't find the link !?
  185.             }
  186.         } else {
  187.             //No small map
  188.         }
  189.  
  190.  
  191.  
  192.  
  193.         //lu map section (when yout type an exact address)
  194.         const addressMapElement = document.querySelector('.lu_map_section');
  195.         if (addressMapElement) {
  196.             // Searching for the link containing "maps/dir/"
  197.             const adirElement = document.querySelector('a[href*="maps/dir/"]');
  198.             if (adirElement) {
  199.  
  200.  
  201.                 // Clone link
  202.                 const clonedAElement = adirElement.cloneNode(true);
  203.  
  204.                 clonedAElement.href = mapsLink;
  205.  
  206.  
  207.                 // Insert the clone which will become a Map button
  208.                 adirElement.parentNode.insertBefore(clonedAElement, adirElement.nextSibling);
  209.  
  210.                 // Searching the "Direction" text
  211.                 const targetDiv = clonedAElement.querySelector('.QuU3Wb.sjVJQd');
  212.  
  213.                 if (targetDiv) {
  214.                     // Changing "Direction" to "Map"
  215.                     const newDiv = document.createElement('div');
  216.  
  217.                     newDiv.textContent = 'Map';
  218.                     targetDiv.innerHTML = '';
  219.                     targetDiv.appendChild(newDiv);
  220.  
  221.  
  222.                     // Creating Map SVG element
  223.                     const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  224.                     svgElement.setAttribute('focusable', 'false');
  225.                     svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  226.                     svgElement.setAttribute('viewBox', '0 0 24 24');
  227.                     svgElement.style.width = '60%';
  228.                     svgElement.style.fill = '#8ab4f8';
  229.  
  230.                     const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  231.                     pathElement.setAttribute('d', 'M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z');
  232.                     svgElement.appendChild(pathElement);
  233.  
  234.                     //Searching the icon div
  235.                     const svgDiv = clonedAElement.querySelector('.kHtcsd');
  236.                     if(svgDiv){
  237.                         svgDiv.innerHTML = '';
  238.                         svgDiv.appendChild(svgElement);
  239.                     }
  240.  
  241.  
  242.                 }
  243.             } else {
  244.                 //No direction link found ?
  245.             }
  246.         }else{
  247.         //No lu_map_section found
  248.         }
  249.  
  250.  
  251.  
  252.  
  253.  
  254.  
  255.         //Big expandable map change direction to open in maps
  256.  
  257.         // Wait for the page to load entirely
  258.         window.addEventListener('load', () => {
  259.  
  260.             // Find the big map's buttons div class="EeWPwe", which contains Direction and Open in maps
  261.             const bigMapButtonsElement = document.querySelector('.EeWPwe');
  262.  
  263.             if (bigMapButtonsElement) {
  264.                 // Find all bigMapButtonsElement a childs (which are Direction and Open in Maps buttons)
  265.                 const aElements = bigMapButtonsElement.querySelectorAll('a');
  266.  
  267.  
  268.  
  269.  
  270.                 // If there is only one <a> = No Open in maps button, only Direction one
  271.                 if (aElements.length === 1) {
  272.                     // Clone it
  273.                     const clonedAElement = aElements[0].cloneNode(true);
  274.  
  275.                     // Change the link for Direction to Maps one
  276.                     if (clonedAElement.href.includes('maps/dir/')) {
  277.                         clonedAElement.href = mapsLink;
  278.                     }
  279.  
  280.                     // Add the clone
  281.                     aElements[0].parentNode.insertBefore(clonedAElement, aElements[0].nextSibling);
  282.  
  283.                     // Find the element with "m0MNmc" which contains text "Direction" and change it to Open in Maps (Sorry for ppl who have their google in other langages)
  284.                     const m0MNmcSpan = clonedAElement.querySelector('.m0MNmc');
  285.                     if (m0MNmcSpan) {
  286.                         m0MNmcSpan.textContent = 'Open in Maps'; //You can put whatever you want here, if you want it to show in another langage
  287.                     }
  288.  
  289.                     // Find the "POUQwd WN4Zxc" span in the clone, which is the icon one, and change it to Maps icon
  290.                     const pouqwdElement = clonedAElement.querySelector('.POUQwd.WN4Zxc');
  291.                     if (pouqwdElement) {
  292.                         // Create maps icon
  293.                         const newDiv = document.createElement('div');
  294.                         newDiv.className = 'POUQwd WN4Zxc';
  295.                         newDiv.innerHTML = `
  296.                 <span>
  297.                     <span style="height:20px;line-height:20px;width:20px" class="z1asCe Y5lOv">
  298.                         <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  299.                             <path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"></path>
  300.                         </svg>
  301.                     </span>
  302.                 </span>
  303.             `;
  304.                         // Replace it
  305.                         pouqwdElement.parentNode.replaceChild(newDiv, pouqwdElement);
  306.                     }
  307.  
  308.                 } else if (aElements.length > 1) {
  309.                     //There are two elements so I think there's no need to do anything, as the second one must be "Open in Maps" button
  310.                 } else {
  311.                     //No <a> found ?
  312.                 }
  313.  
  314.  
  315.             }else {
  316.                 //No "EeWPwe" found ?
  317.             }
  318.  
  319.         });
  320.  
  321.  
  322.  
  323.  
  324.  
  325.  
  326.  
  327.     }
  328.  
  329.  
  330.     // Call the function to add the button
  331.     addMapsButton();
  332. })();