Pretty simple code. I have a new google cloud key. I load the JavaScript asynchronously and wait for it, but when I try to create a single marker, I get "This page can't load Google Maps Correctly.

HTML

JavaScript (via Typescript)

var gMap;
let center = { lat:29.134787, lng: -90.19385 };

window.onload = () => {
    loadlibraries().then(function () { Dostuff(); });
};

async function loadlibraries(): Promise {
    await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    await google.maps.importLibrary("core") as google.maps.CoreLibrary;
    await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
}


function Dostuff() {

    gMap = new google.maps.Map(document.getElementById("map_canvas"));
    gMapOptions = {
        panControl: true,
        zoomControl: false,
        scaleControl: true,
        scrollwheel: true,
        streetViewControl: false,
        minZoom: 2,
        center: center,
        zoom:8,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP.toString(), google.maps.MapTypeId.SATELLITE.toString()],
            position: google.maps.ControlPosition.BOTTOM_RIGHT
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP

    }
    gMap.mapId = "DEMO_MAP_ID";
    gMap.setOptions(gMapOptions);



    // add a marker.
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map: gMap,
        position: center,
        title: 'Center'
    });
}

Google cloud set up:

console view of error:

What is displayed on the site