How to render a Highcharts map in Webflow

Question

I run a Webflow site, where I have historically had no problem rendering charts produced in Highcharts via the HTML embed element. However I am struggling to get the maps module to render at all.

I have the following two scripts in the head code of my site:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>

Then in an embed element I have the following code (my test uses one of the Highmaps demos to show that it's not a problem with the map code itself):

<div id='highmaps-test'></div>

<script>
(async () => {

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/custom/europe.topo.json'
    ).then(response => response.json());

    // Instantiate the map
    Highcharts.mapChart('highmaps-test', {
        chart: {
            map: topology,
            spacingBottom: 20
        },

        title: {
            text: 'Europe time zones'
        },

        accessibility: {
            series: {
                descriptionFormat: 'Timezone {series.name} with {series.points.length} countries.'
            },
            point: {
                valueDescriptionFormat: '{point.name}.'
            }
        },

        legend: {
            enabled: true
        },

        plotOptions: {
            map: {
                allAreas: false,
                joinBy: ['iso-a2', 'code'],
                dataLabels: {
                    enabled: true,
                    color: '#FFFFFF',
                    style: {
                        fontWeight: 'bold'
                    },
                    // Only show dataLabels for areas with high label rank
                    format: '{#if (lt point.properties.labelrank 5)}' +
                        '{point.properties.iso-a2}' +
                        '{/if}'
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '{point.name}: <b>{series.name}</b>'
                }
            }
        },

        series: [{
            name: 'UTC',
            data: ['IE', 'IS', 'GB', 'PT'].map(code => ({ code }))
        }, {
            name: 'UTC + 1',
            data: [
                'NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL',
                'CZ', 'AT', 'CH', 'LI', 'SK', 'HU', 'SI', 'IT', 'SM', 'HR',
                'BA', 'YF', 'ME', 'AL', 'MK'
            ].map(code => ({ code }))
        }, {
            name: 'UTC + 2',
            data: [
                'FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR',
                'TR', 'CY'
            ].map(code => ({ code }))
        }, {
            name: 'UTC + 3',
            data: [{
                code: 'RU'
            }]
        }]
    });

})();
</script>

I can't understand why the map isn't rendering (I've tested in both Chrome and Safari with no luck). It, and other maps I've created, work perfectly in codepen. Am I doing something wrong with the scripts?

I have also tried moving the Highmaps module script to the head of the page itself rather than the whole site. This also doesn't work. I've even tried loading the two scripts in the embed itself rather than in the page or site head code — nothing.

Any help greatly appreciated! Thank you.

PS I should also note that I don't really know javascript and this is about the extent of my coding capabilities, so if I've missed something glaringly obvious please just let me know.