How to make agm-map disabled when using angular-google-maps?

Question

I'm using AgmMap in an Angular 7 application. How can I make the map disabled, grayed out, while data is loading? The application awaits data before it can populate the map with markers, and I want the user to know it is awaiting data so user doesn't assume there are no markers in the section of the map that they're viewing.

Is there a simple disabled input / parameter I can use?

Something like: [disabled]="mapLoading"?

Would look like this:

<agm-map #agmMap
    id="map-locater"
    (mapReady)="mapReady($event)"
    [disabled]="mapLoading"
    [streetViewControl]="false"
    [latitude]="lat"
    [longitude]="lng"
    [styles]="styles">

Answer 1

You can use property of [disableDefaultUI]="true"

You can test with below link. https://stackblitz.com/edit/angular-google-maps-demo?file=app%2Fapp.component.html