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