It is currently not possible to upload or import JSON from Google Map Console/Platform for custom styling of Google Maps.

But it is possible to add custom styles from the code end. I have also tried this in an Angular project.

Working Code -

import { Loader } from '@googlemaps/js-api-loader';

ngOnInit(): void {
  const loader = new Loader({
    apiKey: API_KEY,
    version: 'weekly'
  });

  loader.importLibrary('maps').then(() => {
    void this.initMap();
  }).catch((error: Error) => {
    console.error(`Error loading Google Maps API: ${error.message}`);
  });
}

async initMap(): Promise <void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const mapOptions = {
    zoom: 7,
    center: {
      lat: 22.5744,
      lng: 88.3629
    },
  };

  const map = new Map(document.getElementById('map'), mapOptions);

  const styledMapType = new google.maps.StyledMapType(
    [
      {
        featureType: 'water',
        elementType: 'all',
        stylers: [
          {
            color: '#f40000',
          },
          {
            visibility: 'on',
          },
        ],
      }
    ]
  );
  this.map.mapTypes.set('styled_map', styledMapType);
  this.map.setMapTypeId('styled_map');
}

Output -

Google map package version -

"@angular/core": "^17.2.0",
"@angular/google-maps": "^17.2.0",
"@googlemaps/js-api-loader": "^1.16.6",
"@googlemaps/markerclusterer": "^2.5.3",

I think you can use StyledMapTypes

const hidePoiMapType = new google.maps.StyledMapType(styles["hidepoi"]);
const showPoiMapType = new google.maps.StyledMapType(styles["showpoi"]);

mapTypes.set("hidepoi",hidePoiMapType)
mapTypes.set("showpoi",showPoiMapType)

And then in you click listeners

document.getElementById("hide-poi").addEventListener("click", () => {
    ...
    map.setMapTypeId("hidepoi")
});
document.getElementById("show-poi").addEventListener("click", () => {
    ...
    map.setMapTypeId("showpoi")
});