Last active
January 24, 2026 03:06
-
-
Save Krzysiu/e07f370198cd00aa35e47bb0df52a9f1 to your computer and use it in GitHub Desktop.
Userscript - Jump from Google Maps to OpenStreetMaps with a click on the added button
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Google Maps → OpenStreetMap button | |
| // @author Krzysztof "Krzysiu" Blachnicki | |
| // @namespace https://github.com/Krzysiu | |
| // @license MIT | |
| // @homepage https://greasyfork.org/scripts/563845-google-maps-openstreetmap-button | |
| // @version 0.3 | |
| // @description Adds a button in Google maps which opens the same map in OpenStreetMaps | |
| // @match https://www.google.com/maps/* | |
| // @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIj48cGF0aCBmaWxsPSIjNmZhYmUzIiBkPSJNMSAwczQzIDczIDQzIDExNFMwIDE4NyAxIDIyOGMwIDQxIDQzIDczIDQzIDExNCAwIDQwLTQzIDExNC00MyAxMTRzNzMgNDQgMTEzIDQ0YzQxIDAgNzQtNDMgMTE0LTQzIDQxIDAgNzMgNDMgMTE0IDQzczExNC00MyAxMTQtNDMgNDQtNzUgNDQtMTE1Yy0xLTQxLTQ0LTczLTQ0LTExNCAwLTQwIDQ0LTczIDQ0LTExNFM0NTYgMCA0NTYgMHMtNzMgNDQtMTE0IDQ0Yy00MCAwLTczLTQ0LTExNC00NC00MCAwLTczIDQzLTExNCA0M0M3NCA0MyAxIDAgMSAwem0xNzEgMTIxYzI0IDAgNDUgMTQgNTUgMzRsLTI3IDE0Yy01LTExLTE1LTE3LTI4LTE3LTE5IDAtMzIgMTMtMzIgMzIgMCAxOCAxMyAzMiAzMiAzMiAxMiAwIDIyLTYgMjctMTVoLTI4di0yNGg2M3Y3YTYyIDYyIDAgMSAxLTYyLTYzem04MCAyaDMzbDM2IDc3IDM2LTc3aDM0djEyMWgtMzF2LTY0bC0zMCA2NGgtMTdsLTMwLTY1djY1aC0zMVYxMjN6TTEyMiAyNTRhNjIgNjIgMCAxIDEgMCAxMjUgNjIgNjIgMCAwIDEgMC0xMjV6bTExOCAwYzE1IDAgMjkgNyAzOSAxOGwtMjAgMjBjLTctNy0xNC0xMS0yMC0xMS00IDAtOSAyLTkgOCAwIDE4IDU2IDcgNTYgNTMgMCAyMy0yMSAzNy00NCAzNy0yMiAwLTQwLTEzLTQ4LTI4bDI1LTE2YzUgOSAxMyAxNSAyNCAxNSA4IDAgMTItNCAxMi05IDAtMTgtNTYtOC01Ni01MCAwLTI2IDIyLTM3IDQxLTM3em02MSAyaDM0bDM1IDc3IDM3LTc3aDMzdjEyMWgtMzF2LTY1bC0zMCA2NWgtMTdsLTMwLTY1djY1aC0zMVYyNTZ6bS0xNzkgMjhjLTE4IDAtMzIgMTQtMzIgMzIgMCAxOSAxNCAzMiAzMiAzMiAxOSAwIDMyLTEzIDMyLTMyIDAtMTgtMTMtMzItMzItMzJ6Ii8+PC9zdmc+ | |
| // @grant none | |
| // ==/UserScript== | |
| /* | |
| Description | |
| ==== | |
| This userscript adds button on the bottom of the Google Maps map view, which takes you to OSM with virtually the same view - same coordinates and virtually the same zoom. As Google Maps URL is dynamic, this script, of course, takes current URL, not initial one | |
| Rationale | |
| ---- | |
| I often use maps to identyfy places. Google Maps for: | |
| 1) satellite | |
| 2) StreetView | |
| 3) [rarely, but] some objects are more visible than on OSM | |
| 4) to quickly copy coordinates to clipboard - for me it's essential and GMaps is just rclick->clickon the first position in menu | |
| 5) good search function, OSM is awful when it comes to that. | |
| But OSM has own good points, like: | |
| 1) it's more up-to-date | |
| 2) ideological - FLOSS, community driven, virtually no spting | |
| 3) as with 3 from GMamps - some objects are present, when GMaps misses it | |
| 4) buildings numbers - again essential for me | |
| 5) programmable via Leaflet (map tiles) and Nominatim (API for geocoding) | |
| So, as you see I'm not interested in "redirect GM to OSM". I want a way to go from GM to OSM. | |
| Config: | |
| ===== | |
| * on the top of the code, there's `newTab` abd `addPin` - you can safely customize it to your likings | |
| * change`btn.textContent = ...` to customize button label | |
| * object that starts with `Object.assign(btn.style, {` - it's a button style in CSS (formatted as `property: "value",` - if you know css basics, you can customize it right there. If you don't, you may guess what does what. | |
| *Maybe* todo: | |
| * change div to a href, so user could copy or middle click on it (due to dynamic URL, it would need a timer, which would in theory take precious CPU cycles | |
| * add ability to go back (well, for now, if you open GM and then switch OSM you can always go back by clicking <- button in your browser (or middle click it, to open previous URL, i.e. GMaps in new tab) | |
| * get rid of the setInterval | |
| */ | |
| (function () { | |
| 'use strict'; | |
| const newTab = false; // true - open in new tab; false - open in the same tab | |
| const addPin = true; // make OSM to add pin - useful for finding the place | |
| const waitForBody = setInterval(() => { | |
| if (!document.body) return; | |
| clearInterval(waitForBody); | |
| const btn = document.createElement('div'); | |
| btn.textContent = '🌍 OSM'; | |
| Object.assign(btn.style, { | |
| position: 'fixed', | |
| bottom: '10px', | |
| left: '50%', | |
| transform: 'translateX(-50%)', | |
| height: '20px', | |
| lineHeight: '20px', | |
| padding: '0 10px', | |
| background: '#1a73e8', | |
| color: '#fff', | |
| fontSize: '12px', | |
| borderRadius: '4px', | |
| cursor: 'pointer', | |
| zIndex: '999999', | |
| userSelect: 'none' | |
| }); | |
| btn.addEventListener('click', () => { | |
| const url = window.location.href; | |
| const match = url.match(/@([0-9.]+),([0-9.]+),([0-9.]+)z/); | |
| if (!match) { | |
| alert('Failed to fetch coordinates from URL 😔'); | |
| return; | |
| } | |
| const lat = match[1]; | |
| const lon = match[2]; | |
| const zoom = Math.round(match[3]); // Google gives zoom as float, so round it (it won't be 1:1: zoom, anywways) | |
| // OSM link with "a pin" | |
| const osmUrl = addPin ? `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=${zoom}/${lat}/${lon}` : `https://www.openstreetmap.org/#map=${zoom}/${lat}/${lon}`; | |
| if (newTab) window.open(osmUrl, '_blank'); else window.location.href = osmUrl; | |
| }); | |
| document.body.appendChild(btn); | |
| }, 300); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment