Google Mpas - Chiamare una funzione dentro InitMap async da evento onclick di un link Buongiorno a tutti, non ho molta esperienza con Javascript e stavo cercando di utilizzare l'import dinamico delle librerie Google Maps come consigliato sulla documentazione originale. Ho la necessità però di disegnare gli AdvancedMarker quando faccio click su un determinato link. Il problema è che essendo la funzione di caricamento dei markers all'interno 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 lei 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 e 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 eliminate le // del commento della riga “//AddM();” che esegue la funzione da dentro InitMap, tutto 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>