-
-
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(); | |
})(); |
Awesome script, thanks!
There's only one tiny problem: Sometimes, Google doesn't show buttons/tabs but links (directly below the search input field, and above where the tabs are).
I cloned the tabsContainer to add a maps link in addition to the maps button/tab:
(function () {
'use strict';
function addMapsLink() {
// Find the existing results tabs (Images, News, etc.)
const linksContainer = document.querySelector('.crJ18e');
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 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();
})();
I also added ".replace("-site:pinterest.*", '')" to "searchQuery" because the maps search is too stupid to ignore "-site" in the search query. Removal of "-site" could probably be automated to remove any "-site", but that might be too much work for something most people probably don't need.
@danielmmmm solution for the links vs tabs worked well for me, but the map image was still not clickable. The fix is easy, change const mapImage = document.querySelector('#lu_map');
to const mapImage = document.querySelector('.Lx2b0d');
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?
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!
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