Chiamare una funzione dentro InitMap async da onclick di un link

di il
2 risposte

Chiamare una funzione dentro InitMap async da onclick di un link

Buongiorno a tutti,
sono nuovo del forum ed è il mio primo post… e a dire il vero non ho neanche molta esperienza con Javascript.

Stavo cercando di  implementare la nuova funzione di import dinamico delle librerie Google Maps. Ho la necessità però di disegnare i Marker, anzi per l'esattezza gli AdvancedMarker, quando faccio click su un link.

Il problema è che essendo la funzione di caricamento dei markers all0interno della funzione asincrona InitMap che carica tutte le librerie non riesco a chiamarla dall'esterno. Se la sposto all'esterno di InitMap riesco a chiamarla dal link ma non riesce a fare riferimento alle const in cui sono caricate le librerie.

E' evidente che mi manca qualche nozione di base ma ho cercato sul web ma non ho trovato nulla di utile. E' un costrutto che non ho mai visto e non so bene cosa cercare.

Vi allego un semplice esempio di codice. Se lo eseguite carica la mappa ma al click sul link da errore perchè non trova AddM(). Se invece elimino le // del commento della riga “//AddM();” che esegue la funzione da dentro InitMap funziona ma ovviamente sempre e non al click.

Qualcuno riesce a spiegarmi come fare?

Grazie mille

    <a id="myLink" href="#" onclick="AddM();return false;">Add marker</a>

    <div id="map"></div>

    <script>
        (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
            ({ key: "****", v: "beta" });
    </script>

    <script>
        let map;

        async function initMap() {
            const position = { lat: ****, lng: *** };
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

            map = new Map(document.getElementById("map"), {
                zoom: 14,
                center: position,
                mapId: "****",
            });


            //AddM();
            
            function AddM() {
                var impianto45956;
                const pin45956 = new PinElement({ borderColor: '#ff0000', background: '#ff0000', glyph: 'LZ', glyphColor: 'white', });
                impianto45956 = { lat: ***, lng: **** };
                marker45956 = new AdvancedMarkerElement({ map: map, id: 45956, position: impianto45956, content: pin45956.element, title: "45956", });
            }

        }

        initMap();
    </script>

2 Risposte

Devi accedere o registrarti per scrivere nel forum
2 risposte