☰

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      202410281
  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. //Link to the git repo : https://github.com/mimouy/Search-Google-Maps-Back
  17.  
  18. (function() {
  19.     'use strict';
  20.         let addedButton = false;
  21.  
  22.  
  23.  
  24.  
  25.     function addBigMapButton() {
  26.  
  27.  
  28.         if (addedButton){
  29.             return null;
  30.         }
  31.  
  32.  
  33.         //Get the search query
  34.         const searchQuery = new URLSearchParams(window.location.search).get('q');
  35.  
  36.         //Use the search query as a link
  37.         const mapsLink = `maps.google.com/maps?q=${searchQuery}`;
  38.  
  39.         //Big expandable map change direction to open in maps
  40.  
  41.             // Find the big map's buttons div class="EeWPwe", which contains Direction and Open in maps
  42.             const bigMapButtonsElement = document.querySelector('.EeWPwe');
  43.  
  44.             if (bigMapButtonsElement) {
  45.                 // Find all bigMapButtonsElement a childs (which are Direction and Open in Maps buttons)
  46.                 const aElements = bigMapButtonsElement.querySelectorAll('a');
  47.  
  48.  
  49.  
  50.  
  51.                 // If there is only one <a> = No Open in maps button, only Direction one
  52.                 if (aElements.length === 1) {
  53.                     // Clone it
  54.                     const clonedAElement = aElements[0].cloneNode(true);
  55.  
  56.                     // Change the link for Direction to Maps one
  57.                     if (clonedAElement.href.includes('maps/dir/')) {
  58.                         clonedAElement.href = mapsLink;
  59.                     }
  60.  
  61.                     // Add the clone
  62.                     aElements[0].parentNode.insertBefore(clonedAElement, aElements[0].nextSibling);
  63.  
  64.                     // 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)
  65.                     const m0MNmcSpan = clonedAElement.querySelector('.m0MNmc');
  66.                     if (m0MNmcSpan) {
  67.                         m0MNmcSpan.textContent = 'Open in Maps'; //You can put whatever you want here, if you want it to show in another langage
  68.                     }
  69.  
  70.                     // Find the "POUQwd WN4Zxc" span in the clone, which is the icon one, and change it to Maps icon
  71.                     const pouqwdElement = clonedAElement.querySelector('.POUQwd.WN4Zxc');
  72.                     if (pouqwdElement) {
  73.                         // Create maps icon
  74.                         const newDiv = document.createElement('div');
  75.                         newDiv.className = 'POUQwd WN4Zxc';
  76.                         newDiv.innerHTML = ` <span>
  77.                         <span style="height:20px;line-height:20px;width:20px" class="z1asCe Y5lOv">
  78.                         <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  79.                             <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>
  80.                         </svg>
  81.                     </span>
  82.                 </span>`
  83.             ;
  84.                         // Replace it
  85.                         pouqwdElement.parentNode.replaceChild(newDiv, pouqwdElement);
  86.                         addedButton = true;
  87.                     }
  88.  
  89.                 } else if (aElements.length > 1) {
  90.                     //There are two elements so I think there's no need to do anything, as the second one must be "Open in Maps" button
  91.                 } else {
  92.                     //No <a> found ?
  93.                 }
  94.  
  95.  
  96.             }else {
  97.                 //No "EeWPwe" found ?
  98.             }
  99.  
  100.  
  101.  
  102.  
  103.  
  104.  
  105.     }
  106.  
  107.  
  108.     function addMapsButton() {
  109.  
  110.  
  111.         if (addedButton){
  112.             return null;
  113.         }
  114.  
  115.         // Find the list container of existing tabs
  116.         const tabsContainer = document.querySelector('.crJ18e');
  117.  
  118.         //Get the search query
  119.         const searchQuery = new URLSearchParams(window.location.search).get('q');
  120.  
  121.         //Use the search query as a link
  122.         const mapsLink = `maps.google.com/maps?q=${searchQuery}`;
  123.  
  124.  
  125.         // Adding the Maps button to the tab if not already in
  126.         if (tabsContainer) {
  127.  
  128.             // Check if already has a Maps button
  129.             let hasGoogleMapsLink = false;
  130.             tabsContainer.querySelectorAll('a').forEach(link => {
  131.                 if (link.href.includes('google.com/maps')) {
  132.                     hasGoogleMapsLink = true;
  133.                 }
  134.             });
  135.             if (hasGoogleMapsLink) {
  136.                 //Already has a Maps button
  137.             } else {
  138.  
  139.                 // Create the Maps button elements (updated)
  140.                 const mapsListItem = document.createElement('div');
  141.                 mapsListItem.jsname = 'VIftV';
  142.                 // mapsListItem.classList.add('Ap1Qsc');
  143.                 mapsListItem.setAttribute('role', 'listitem');
  144.  
  145.                 // Replace this entire section with the provided <a> element
  146.                 const mapsButton = document.createElement('a');
  147.                 mapsButton.href = mapsLink;
  148.                 mapsButton.jsname = "ONH4Gc";
  149.                 mapsButton.classList.add("LatpMc");
  150.                 mapsButton.classList.add("nPDzT");
  151.                 mapsButton.classList.add("T3FoJb");
  152.                 mapsButton.dataset.navigation = "server";
  153.                 mapsButton.dataset.hveid = "CAEQCA";
  154.  
  155.  
  156.                 //mapsButton.textContent = "Maps"; // Set the inner text if need to
  157.                 const mapsButtonText = document.createElement('div');
  158.                 mapsButtonText.jsname = "bVqjv";
  159.                 mapsButtonText.classList.add("YmvwI");
  160.                 mapsButtonText.textContent = "Maps";
  161.                 mapsButton.appendChild(mapsButtonText);
  162.  
  163.                 // Append the mapsButton to the list item
  164.                 mapsListItem.appendChild(mapsButton);
  165.  
  166.                 //Decide where to put Maps button if not searching for a location (second or third)
  167.                 let buttonPosition = 2
  168.                 // Find the maps
  169.                 if(document.querySelector('.KY6ERe')||document.querySelector('.Ggdpnf.kno-fb-ctx')||document.querySelector('.lu_map_section')||document.querySelector('.EeWPwe')||document.querySelector('.UZb8tc')||document.querySelector('.luibr'))
  170.                 {
  171.                     //Decide where to put Maps button if searching for a location (first)
  172.                     buttonPosition = 1
  173.  
  174.                 }else{//?
  175.                 }
  176.  
  177.                 // Insert the Maps button after the All button
  178.                 const firstTabsChild = tabsContainer.firstElementChild;
  179.                 firstTabsChild.insertBefore(mapsButton, firstTabsChild.children[buttonPosition]);
  180.  
  181.             }
  182.  
  183.         }
  184.  
  185.  
  186.  
  187.         const smallMapElement = document.querySelector('.KY6ERe');
  188.  
  189.         if (smallMapElement) {
  190.             // Look for the links (or div) parent
  191.             const targetElement = smallMapElement.querySelector('.ZqGZZ.xP81Pd');
  192.  
  193.             //Look for the small map image
  194.             if (targetElement) {
  195.  
  196.                 //Is the mini map image a link ?
  197.                 if (targetElement.tagName.toLowerCase() === 'a') {
  198.                     //Mini map is already a link, nothing to do
  199.                 }else{
  200.                     //Create a new Map image which will be a link
  201.                     let newMapImage = document.createElement('a');
  202.                     let parent = targetElement.parentNode;
  203.                     let children = targetElement.childNodes;
  204.                     // Copy all attributes and childs to the newMapImage
  205.                     Array.prototype.forEach.call(targetElement.attributes, function (attr) {
  206.                         newMapImage.setAttribute(attr.name, attr.value);
  207.                     });
  208.                     Array.prototype.forEach.call(children, function (elem) {
  209.                         newMapImage.appendChild(elem);
  210.                     });
  211.                     newMapImage.href = mapsLink;
  212.                     //Replace old image by the new (link) one
  213.                     parent.replaceChild(newMapImage, targetElement);
  214.                     addedButton = true;
  215.                 }
  216.             } else {
  217.                 //
  218.             }
  219.         } else {
  220.              //No small map
  221.          }
  222.  
  223.  
  224.  
  225.  
  226.  
  227.  
  228.  
  229.         //
  230.  
  231.  
  232.                 // Find the micro map element if any, to make it clickable
  233.         const microMapElement = document.querySelector('.luibr');
  234.  
  235.         if (microMapElement) {
  236.             // Look for the link's (which is a div if none) parent
  237.             const microTargetElement = microMapElement.querySelector('.rhsmap4col > a') || microMapElement.querySelector('.rhsmap5col > a');
  238.  
  239.             if (microTargetElement) {
  240.  
  241.                 if (microTargetElement.tagName.toLowerCase() === 'a' && microTargetElement.hasAttribute('href')) {
  242.                     //Micro map is already a link, nothing to do
  243.  
  244.                 }else{
  245.                     //Micro map is not a link (do not have a href)
  246.  
  247.                     microTargetElement.href = mapsLink;
  248.                     addedButton = true;
  249.  
  250.                     // Create the Zoom icon div
  251.                     const newDiv = document.createElement('div');
  252.  
  253.                     newDiv.setAttribute('jscontroller', 'hnlzI');
  254.                     newDiv.setAttribute('class', 'sEtYzd duf-h TUOsUe BSRXQc sxd9Pc');
  255.                     newDiv.setAttribute('jsaction', 'KQB0gd;rcuQ6b:npT2md');
  256.                     newDiv.setAttribute('data-ved', '2ahUKEwjo44_p66CJAxXtFFkFHcHlDIUQkNEBegQIUxAJ');
  257.  
  258.                     // Create img element (zoom icon) inside the div
  259.                     const img = document.createElement('img');
  260.  
  261.                     img.setAttribute('class', 'kf0xcf oYQBg FIfWIe Tbiej u60jwe');
  262.                     img.setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAgMAAAAog1vUAAAACVBMVEUAAACaoKaaoKZGj4K4AAAAA3RSTlMA/58J4rd5AAAAdUlEQVR4AeXPAQaEYBgG4RGLDhJ7nIVJgI7SJdrzBsA/ABF6AYPH9/GufVRvSsCZNJk0Ny2roTZD7YY6DIWhMBSGwlAYCkMlHYz7k315er2gd+YbYW5aVsZ0bmOa3IcUCkNhKAyFoTAUhsJQGApDofq7Ib1hF4lkK+5yFPqsAAAAAElFTkSuQmCC');
  263.                     img.setAttribute('alt', '');
  264.                     img.setAttribute('height', '24');
  265.                     img.setAttribute('width', '24');
  266.                     img.setAttribute('data-csiid', 'nQAXZ6ihIe2p5NoPwcuzqAg_9');
  267.                     img.setAttribute('data-atf', '0');
  268.                     newDiv.style.cssText = `
  269.                     background-color: rgba(48, 49, 52, 0.8);
  270.                     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  271.                     height: 32px;
  272.                     width: 32px;
  273.                     display: block;
  274.                     outline: 0;
  275.                     position: absolute;
  276.                     top: 4px;
  277.                     vertical-align: middle;
  278.                     right: 4px;
  279.                     ;`
  280.  
  281.                     // Append the img to the Zoom div
  282.                     newDiv.appendChild(img);
  283.                     // Find the gImg element
  284.                     const gImgElement = microTargetElement.querySelector('g-img');
  285.  
  286.                     // Insert the zoom icon right after the gImh element so it shows on it (top right)
  287.                     if (gImgElement) {
  288.                         gImgElement.parentNode.insertBefore(newDiv, gImgElement.nextSibling);
  289.                     } else {
  290.  
  291.                         //no gImg found !?
  292.                     }
  293.  
  294.                 }
  295.  
  296.             } else {
  297.                 //Didn't find the link !?
  298.             }
  299.         } else {
  300.             //No small map
  301.         }
  302.  
  303.  
  304.  
  305.         //
  306.  
  307.  
  308.  
  309.  
  310.  
  311.         //lu map section (when yout type an exact address)
  312.         const addressMapElement = document.querySelector('.lu_map_section');
  313.         if (addressMapElement) {
  314.             // Searching for the link containing "maps/dir/"
  315.             const adirElement = document.querySelector('a[href*="maps/dir/"]');
  316.             if (adirElement) {
  317.  
  318.  
  319.                 // Clone link
  320.                 const clonedAElement = adirElement.cloneNode(true);
  321.  
  322.                 clonedAElement.href = mapsLink;
  323.  
  324.  
  325.                 // Insert the clone which will become a Map button
  326.                 adirElement.parentNode.insertBefore(clonedAElement, adirElement.nextSibling);
  327.  
  328.                 // Searching the "Direction" text
  329.                 const targetDiv = clonedAElement.querySelector('.QuU3Wb.sjVJQd');
  330.  
  331.                 if (targetDiv) {
  332.                     // Changing "Direction" to "Map"
  333.                     const newDiv = document.createElement('div');
  334.  
  335.                     newDiv.textContent = 'Map';
  336.                     targetDiv.innerHTML = '';
  337.                     targetDiv.appendChild(newDiv);
  338.  
  339.  
  340.                     // Creating Map SVG element
  341.                     const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  342.                     svgElement.setAttribute('focusable', 'false');
  343.                     svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  344.                     svgElement.setAttribute('viewBox', '0 0 24 24');
  345.                     svgElement.style.width = '60%';
  346.                     svgElement.style.fill = '#8ab4f8';
  347.  
  348.                     const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  349.                     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');
  350.                     svgElement.appendChild(pathElement);
  351.  
  352.                     //Searching the icon div
  353.                     const svgDiv = clonedAElement.querySelector('.kHtcsd');
  354.                     if(svgDiv){
  355.                         svgDiv.innerHTML = '';
  356.                         svgDiv.appendChild(svgElement);
  357.                     }
  358.                     addedButton = true;
  359.  
  360.                 }
  361.             } else {
  362.                 //No direction link found ?
  363.             }
  364.         }else{
  365.         //No lu_map_section found
  366.         }
  367.  
  368.  
  369.     }
  370.  
  371.  
  372.             window.addEventListener('load', () => {
  373.                 addMapsButton();
  374.                 addBigMapButton();
  375.             });
  376.  
  377.     // Call the function to add the button
  378. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址