-
-
Save Delivator/cbb71fc770b11b02b4269f26d65ce145 to your computer and use it in GitHub Desktop.
// ==UserScript== | |
// @name Google Search Maps Fix | |
// @namespace http://tampermonkey.net/ | |
// @version 2024-03-07 | |
// @description Bring Google maps button back | |
// @author Daan Grashoff / 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() { | |
// Find the existing results tabs (Images, News, etc.) | |
const tabsContainer = document.querySelector('.IUOThf'); | |
const mapImage = document.querySelector('#lu_map'); | |
// 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 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); | |
mapsButton.href = mapsLink; | |
// Insert the Maps button at the beginning of the tabs container | |
tabsContainer.prepend(mapsButton); | |
} | |
} | |
// Call the function to add the button | |
addMapsLink(); | |
})(); |
AFAIK the problem is that google uses these randomly generated IDs and class names that can be different for users in different regions and sometimes they just update their UI and it becomes outdated again.
Have any of you tried out if the original (https://gist.github.com/Daan-Grashoff/57c40bc355bcb4d1ebc1290094f57ddf) has fixed any of these issues?
The inconsistency is so frustrating. Sometimes google uses static maps, sometimes dynamic maps and sometimes no maps. And sometimes the tab looks completely different and I would need an exception for every single case.
Yeah, Google are not making it easy. I ended up with
// 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');
}
Which seems to handle all cases I have encountered so far.
Thank you so much for this script! It is working for addresses (both the tab and the map image) but for some reason, it does not work for cities. For example when I search for "Copenhagen", the tab does not appear
Hmm can't reproduce it on my side. Can you send me a link?
It's fine, I found a workaround for that. Basically when I was running one-word plain searches like "Denmark" or "Copenhagen", there wasn't any map button appearing. I have made it a habit now to end all of my searches regarding places with the word map, so I am typing "USA map" instead of just "USA" and it works like a charm, I have both the button "Maps" on top and the clickable map! Thanks once again for the great script!
Hmm can't reproduce it on my side. Can you send me a link?