Angular 19 Google Maps Javascript SDK Does not load properly

Im currently working on Angular 19.1.7 based project where I am trying load google maps via Javascript SDK. Im using below in index.html:

 <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&libraries=drawing"
    defer></script>

In my map component I'm initialize the map like below:

HTML:

<div #mapContainer id="map"></div>

Component:

      ngOnInit() {
         initMap()
      }
    
      initMap(): void {
        if (!window.google || !window.google.maps) {
          this.toaster.error('Google Maps API is not available. Please check your internet connection.');
          return;
        }
    
        try {
          const mapOptions: any = {
            center: new (window.google.maps.LatLng as any)(40.730610, -73.935242),
            zoom: 12,
          };
    
          // Create the map
          this.map = new (window.google.maps.Map as any)(this.mapContainer.nativeElement, mapOptions);
    
          this.initDrawingManager();
          window.google.maps.event.addListener(this.map, 'click', (event: any) => {
            if (this.editMode === 'place-marker') {
              this.addMarkerAtPosition(event.latLng);
            } else if (this.editMode === 'none' && this.currentPolygonOverlay) {
            }
          });
    
        } catch (error) {
          this.toaster.error('Failed to initialize the map. Please refresh the page.');
        }
      }

  initDrawingManager(): void {
    // Check if drawing library is available
    if (!window.google.maps.drawing) {
      this.toaster.error('Map drawing tools are not available.');
      return;
    }

    try {
      // Create the drawing manager
      this.drawingManager = new window.google.maps.drawing.DrawingManager({
        drawingMode: null, // Initially set to null (hand tool)
        drawingControl: true,
        drawingControlOptions: {
          position: window.google.maps.ControlPosition.TOP_CENTER,
          drawingModes: [
            window.google.maps.drawing.OverlayType.POLYGON
          ]
        },
        polygonOptions: {
          editable: true,
          draggable: true,
          strokeColor: '#ff0800ff',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#ca6f5fff',
          fillOpacity: 0.35
        }
      });

      // Set the drawing manager onto the map but hidden initially
      this.drawingManager.setMap(null);

      // Add event listener for when a polygon is complete
      window.google.maps.event.addListener(
        this.drawingManager,
        'overlaycomplete',
        (event: any) => {
          this.drawingManager.setDrawingMode(null);

          const polygonId = `user-polygon-${this.userCreatedPolygons.length + 1}`;
          const polygonName = `User Polygon ${this.userCreatedPolygons.length + 1}`;

          const newPolygon = event.overlay;
          newPolygon.id = polygonId;

          this.userCreatedPolygons.push({
            polygon: newPolygon,
            name: polygonName,
            color: '#00FF00'
          });

          window.google.maps.event.addListener(
            newPolygon,
            'mouseup',
            () => {
              this.getPolygonCoordinates(newPolygon, polygonName);
            }
          );
          window.google.maps.event.addListener(
            newPolygon,
            'click',
            () => {
              if (this.editMode === 'delete') {
                this.deletePolygon(newPolygon);
              }
            }
          );
          this.getPolygonCoordinates(newPolygon, polygonName);
          this.savePolygonToDatabase(newPolygon);
        }
      );
    } catch (error) {
      this.toaster.error('Failed to initialize drawing tools.');
    }
  }

Problem:

When I go to the component and reload the page. Map renders accordingly with any markers or polygons.

If I start interating with the maps( zoom / street-view) it gives the error in console below:

Access to XMLHttpRequest at 'https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/GetViewportInfo' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Upon trying to use street view:

Access to XMLHttpRequest at 'https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/SingleImageSearch' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.Understand this error js?key=AIzaSyC7_zVbYpp8R7UUvYT36GiyHvP8PqKpOh4&libraries=drawing:308 POST https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/SingleImageSearch net::ERR_FAILED

I have set Application restriction to None and API restriction to None like below:

The same API call https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/GetViewportInfo Get successful upon page reload.

Any help would be appreciated.

After hours of effort putting to debug the above issue. Ive realized that application insights being blocking the google maps API calls being processed. Therefore I had to whitelist the google map base URL. After that it successfully allowed request from google maps to load and then maps functionality including street view, zoom worked without an issue. Sharing this as insight.