☰

OpenStreetMap to Google Maps

Add button to redirect to Google Maps from OpenStreetMap and allow dragging

// ==UserScript==
// @name         OpenStreetMap to Google Maps
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Add button to redirect to Google Maps from OpenStreetMap and allow dragging
// @author       Aoi
// @match        https://www.openstreetmap.org/edit*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    // Retrieve button position from storage or set default
    var buttonX = GM_getValue('buttonX', '50%');
    var buttonY = GM_getValue('buttonY', '20px');

    // Create button element
    var googleMapsButton = document.createElement('button');
    googleMapsButton.textContent = 'View on Google Maps';
    googleMapsButton.style.position = 'fixed';
    googleMapsButton.style.left = buttonX;
    googleMapsButton.style.top = buttonY;
    googleMapsButton.style.zIndex = '9999';
    googleMapsButton.style.cursor = 'move';
    googleMapsButton.style.padding = '10px';
    googleMapsButton.style.backgroundColor = '#fff';
    googleMapsButton.style.border = '1px solid #000';
    googleMapsButton.style.borderRadius = '5px';

    // Function to handle button drag
    function handleDrag(event) {
        event.preventDefault();
        var offsetX = event.clientX - startX;
        var offsetY = event.clientY - startY;
        var newX = buttonStartX + offsetX;
        var newY = buttonStartY + offsetY;
        googleMapsButton.style.left = newX + 'px';
        googleMapsButton.style.top = newY + 'px';
        GM_setValue('buttonX', newX + 'px');
        GM_setValue('buttonY', newY + 'px');
    }

    // Function to handle mouse release
    function handleRelease(event) {
        document.removeEventListener('mousemove', handleDrag);
        document.removeEventListener('mouseup', handleRelease);
    }

    // Variables to track mouse movement
    var startX, startY, buttonStartX, buttonStartY;

    // Event listener for mouse down on the button
    googleMapsButton.addEventListener('mousedown', function(event) {
        event.preventDefault();
        startX = event.clientX;
        startY = event.clientY;
        buttonStartX = googleMapsButton.offsetLeft;
        buttonStartY = googleMapsButton.offsetTop;
        document.addEventListener('mousemove', handleDrag);
        document.addEventListener('mouseup', handleRelease);
    });

    // Event listener for button click
    googleMapsButton.addEventListener('click', function() {
        // Get the latitude, longitude, and zoom from the URL
        var url = window.location.href;
        var matches = url.match(/#map=(\d+)\/([-\d.]+)\/([-\d.]+)/);
        if (matches && matches.length >= 4) {
            var zoom = matches[1];
            var lat = matches[2];
            var lon = matches[3];

            // Construct the Google Maps URL and open in new tab
            var googleMapsURL = `https://www.google.com/maps/@${lat},${lon},${zoom}z`;
            window.open(googleMapsURL, '_blank');
        }
    });

    // Append button to the document body
    document.body.appendChild(googleMapsButton);
})();