Javascript executes correctly in JSFiddle but not in Acumatica

This question is an extension of this one.

I have changed the second script to be as follows:

<script>
var map;
async function initMap() {
	const center = { lat: 40.75, lng: -77 };
	const { Map } = await google.maps.importLibrary("maps");
	const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
	const { Geocoder } = await google.maps.importLibrary("geocoding");

	/* the map */
	map = new Map(document.getElementById("map"), {
		zoom: 7.8,
		center: center,
		mapId: "DEMO_MAP_ID",
	});

	/* get addresses from Acumatica field */
	/*var addressesToPlot = px_alls["cstAddressesToPlot"].getValue();*/
	var addressesToPlot = "Robisonia, PA; Mechanicsburg, PA; Philadelphia, PA";
	var addresses = addressesToPlot.split(';');

	/* encode addresses as lat/lng */
	const geocoder = new Geocoder();
	for (var i=0; i<addresses.length; i++)
	{
		geocoder.geocode({ 'address': addresses[i] }, (results, status) => {
			if (status == google.maps.GeocoderStatus.OK) {
					const marker = new AdvancedMarkerElement({
					map: map,
					position: results[0].geometry.location,
					title: addresses[i],
				});
			}
		});
	}
}
initMap();
</script>

The page loads the map correctly, but the markers are not plotted on the map. However, the same code runs just fine in JSFiddle: (try it)

Could someone with more experience in JavaScript explain why that is?

@zfebert56