Google Maps Javascript SDK giving CORS Error

I am getting CORS error and I am not able to load google maps. I am using Angular 8.

Initial call to load map services is successful, but the next call, it gives error.

enter image description here

enter image description here

This is how I am loading the google map


export class MapLoaderService {
  private static promise: Promise<any>;
  public static load(): Promise<any> {
    let key = "";
    const mapsUrl = `https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing,places&key=${key}&callback=__onGoogleLoaded`;

    // First time 'load' is called?
    if (!this.promise) {
      // Make promise to load
      this.promise = new Promise((resolve) => {
        this.loadScript(mapsUrl);
        // Set callback for when google maps is loaded.
        window["__onGoogleLoaded"] = ($event: any) => {
          resolve("google maps api loaded");
        };
      });
    }
    // Always return promise. When 'load' is called many times, the promise is already resolved.
    return this.promise;
  }

  //this function will work cross-browser for loading scripts asynchronously
  static loadScript(src: any, callback?: any): void {
    var s: any, r: any, t: any;
    r = false;
    s = document.createElement("script");
    s.type = "text/javascript";
    s.src = src;
    s.onload = s.onreadystatechange = function () {
      if (!r && (!this.readyState || this.readyState == "complete")) {
        r = true;
        if (typeof callback === "function") callback();
      }
    };
    t = document.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(s, t);
  }
}

and then using like:

 ngAfterViewInit() {
    MapLoaderService.load().then(() => {
      this.setupMapEvents();
    });
  }

Note: It was working few weeks back, but all of sudden, I am getting this error.

Also, on google console, I added restrictions:

enter image description here