Lägger till en knapp vid kartan, den som visas i Blockets bostadsannonser, för att öppna annonsens address i Google Maps istället

blocket-bostad-google-maps.user.js

// ==UserScript==
// @name         Blocket bostad Google Maps
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  try to take over the world!
// @author       You
// @downloadURL  https://gist.github.com/iwconfig/69c74cf7fa57ef9034c0b0dee7fa20e5/raw/blocket-bostad-google-maps.user.js
// @updateURL    https://gist.github.com/iwconfig/69c74cf7fa57ef9034c0b0dee7fa20e5/raw/blocket-bostad-google-maps.user.js
// @supportURL   https://gist.github.com/iwconfig/69c74cf7fa57ef9034c0b0dee7fa20e5
// @match        https://bostad.blocket.se/*
// @icon         https://icons.duckduckgo.com/ip2/blocket.se.ico
// @grant        none
// @noframes
// ==/UserScript==

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

async function insertBtn() {
    let headers = {
        "content-type": "application/json",
    }

    let match = document.cookie.match('Access-Token=(.*?);')

    if (match) {
        let accessToken = match[1]
        headers['Access-Token'] = match[1]
    }

    let id = window.location.pathname.split('/').filter(Boolean).pop()
    if (isNaN(id)) return

    let response = await fetch("https://api.qasa.se/graphql", {
        "credentials": "omit",
        "headers": headers,
        "referrer": "https://bostad.blocket.se/",
        "body": `{"operationName":"HomeView","variables":{"id":"${id}"},"query":"query HomeView($id: ID!) { home(id: $id) { location { latitude locality longitude route streetNumber } } }"}`,
        "method": "POST",
        "mode": "cors"
    });

    let janson = await response.json()
    let data = janson.data.home.location

    let url = `https://maps.google.com?q=${data.route} ${data.streetNumber}, ${data.locality}&ll=${data.latitude},${data.longitude}`

    waitForElm('.maplibregl-ctrl.maplibregl-ctrl-attrib.mapboxgl-ctrl.mapboxgl-ctrl-attrib.maplibregl-compact.mapboxgl-compact').then((elm) => {
        elm.insertAdjacentHTML(
            'beforeend',
            `<div id="googleMapsBtn" style="display: block; padding: 0 7px; margin-right: 3px; border-right: lightgrey solid 1px;"><a href="${url}" target="_blank" rel="noopener noreferrer">Öppna i Google Maps</a></div>`
        )
    });
}

(async function() {
    'use strict';

    insertBtn()

    waitForElm('button.maplibregl-ctrl-attrib-button.mapboxgl-ctrl-attrib-button').then((elm) => {
        elm.addEventListener('click', elm => {
            let btn = document.querySelector('#googleMapsBtn')
            if (btn.style.display == 'block') {
                btn.style.display = 'none'
            } else {
                btn.style.display = 'block'
                elm.target.blur()
            }
        })
    });

    let currentLocation = document.location.href;

    const mObserver = new MutationObserver((mutationList) => {
        if (currentLocation !== document.location.href) {
            currentLocation = document.location.href;
            let id = window.location.pathname.split('/').filter(Boolean).pop()
            if (!isNaN(id) && id.length == 6) {
                insertBtn()

            }
        }
    });

    mObserver.observe(
        document.getElementById('root'), {
            childList: true,
            subtree: false // important for performance
        }
    );

})();