☰

Google Maps Iframe Generator

Generates a Google Maps iframe code based on user input

// ==UserScript==
// @name         Google Maps Iframe Generator
// @namespace    _derreck_
// @version      2.0
// @description  Generates a Google Maps iframe code based on user input
// @match        *platesmania.com/admin/edit_dopol.php*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create button to open the iframe generator
    const button = document.createElement('button');
    button.textContent = 'Add gMaps icon';
    button.style.position = 'fixed';
    button.style.bottom = '20px';
    button.style.right = '20px';
    button.style.zIndex = '9999';
    document.body.appendChild(button);

    // Button click event handler
    button.addEventListener('click', openIframeGenerator);

    // Function to open the iframe generator window
    function openIframeGenerator() {
        const generatorWindow = window.open('', '_blank', 'width=600,height=400');
        generatorWindow.document.write(`
            <h1>Generate code for your description box!</h1>
            <label for="customText1">Text before the Map button:</label>
            <input type="text" id="customText1"><br><br>
            <label for="customText2">Text after the Map button:</label>
            <input type="text" id="customText2"><br><br>
            <label for="customText3">Text below the line that contains the map button (good for hashtags etc) (will not show below in the preview, but in the end result it will)</label>
            <input type="text" id="customText3"><br><br>
            <label for="location">Location:</label>
            <input type="text" id="location"><br><br>
            <label for="mapView">Map View:</label>
            <select id="mapView">
                <option value="m">Map</option>
                <option value="h">Satellite + Street names</option>
                <option value="k">Satellite</option>
                <option value="p">Terrain</option>
            </select><br><br>
            <label for="zoomLevel">Zoom Level:</label>
            <input type="number" id="zoomLevel" min="1" max="20"><br><br>
            <button id="previewButton">Preview</button>
            <button id="insertButton">Insert</button>
        `);

        // Preview button click event handler
        generatorWindow.document.getElementById('previewButton').addEventListener('click', generatePreview);

        // Insert button click event handler
        generatorWindow.document.getElementById('insertButton').addEventListener('click', insertCode);

        // Function to generate the preview
        function generatePreview() {
            const customText1 = generatorWindow.document.getElementById('customText1').value;
            const customText2 = generatorWindow.document.getElementById('customText2').value;
            const customText3 = generatorWindow.document.getElementById('customText3').value;
            const location = generatorWindow.document.getElementById('location').value;
            const mapView = generatorWindow.document.getElementById('mapView').value;
            const zoomLevel = generatorWindow.document.getElementById('zoomLevel').value;

            const previewContainer = generatorWindow.document.createElement('div');
            previewContainer.innerHTML = `
                <p style="text-align: center;">
                    ${customText1}<button style="border: none; background: none; cursor: pointer;" onclick="event.preventDefault(); if (window.location.href.indexOf('gallery') === -1) { document.getElementById('gmap_canvas').style.display = 'block'; }">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Google_Maps_icon_%282020%29.svg/167px-Google_Maps_icon_%282020%29.svg.png" alt="Map" style="width: 11px; height: 16px;">
                    </button>${customText2}
                    <iframe display="none" scrolling="no" marginheight="0" marginwidth="0" id="gmap_canvas" src="https://maps.google.com/maps?width=520&height=400&hl=en&q=%20+(${location})&t=${mapView}&z=${zoomLevel}&ie=UTF8&iwloc=B&output=embed" width="520" height="400" frameborder="0" style="display: none;"></iframe>
                    ${customText3} </p>`;


            generatorWindow.document.body.appendChild(previewContainer);
        }

        // Function to insert the generated code into the text box on the website
        function insertCode() {
            const customText1 = generatorWindow.document.getElementById('customText1').value;
            const customText2 = generatorWindow.document.getElementById('customText2').value;
            const customText3 = generatorWindow.document.getElementById('customText3').value;
            const location = generatorWindow.document.getElementById('location').value;
            const mapView = generatorWindow.document.getElementById('mapView').value;
            const zoomLevel = generatorWindow.document.getElementById('zoomLevel').value;

            const code = `<p style="text-align: center;">${customText1}<button style="border: none; background: none; cursor: pointer;" onclick="event.preventDefault(); if (window.location.href.indexOf('gallery') === -1) { document.getElementById('gmap_canvas').style.display = 'block'; }"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Google_Maps_icon_%282020%29.svg/167px-Google_Maps_icon_%282020%29.svg.png" alt="Map" style="width: 11px; height: 16px;"></button>${customText2}<iframe display="none" scrolling="no" marginheight="0" marginwidth="0" id="gmap_canvas" src="https://maps.google.com/maps?width=520&height=400&hl=en&q=%20+(${location})&t=${mapView}&z=${zoomLevel}&ie=UTF8&iwloc=B&output=embed" width="520" height="400" frameborder="0" style="display: none;"></iframe>
${customText3} </p>`;

            // Insert the code into the text box on the website
            const targetTextBox = document.getElementsByName('dop')[0];
            if (targetTextBox) {
                targetTextBox.value = code;
                generatorWindow.close();
            } else {
                alert('Target text box not found!');
            }
        }
    }
})();