Cannot see custom Google Map style on my app

Issue

I have done Google map stylings according to this doc: https://developers.google.com/maps/documentation/javascript/styling

I have used the Cloud tool here. I have used the available template. i.e. no JSON styles here.

index.html

<script
    src="https://maps.googleapis.com/maps/api/js?key=mykey&map_ids=mapidhere">
    </script>

I use Angular Google Maps component here: https://github.com/angular/components/blob/master/src/google-maps/README.md

But I didn't do anything there related to the Custom styling. I have restarted the app and clear the cache too. But no map styles yet? I have published the changes too. Any clue here why this behavior?

component.html

<google-map [options]="locationModel?.googleMap?.mapOptions" height="104%" width="100%">

  <map-marker #marker="mapMarker" *ngFor="let storeMarkerPosition of locationModel?.googleMap?.storeMarkerPositions"
    [position]="storeMarkerPosition.markerPosition" [options]="locationModel?.googleMap?.markerOptions"
    (mapClick)="openInfoCard(marker,storeMarkerPosition.store)">

  </map-marker>

  <map-info-window>
    <app-location-details *ngIf="store" [storeModel]="store"></app-location-details>
  </map-info-window>

</google-map>

Solution

I remember this one :)
You need to extend the google.maps.MapOptions interface like this:

export interface MapConfiguration extends google.maps.MapOptions {
  /*
   * `mapId` not yet available in the google.maps.MapOptions type definition
   * See https://developers.google.com/maps/documentation/javascript/using-typescript
   */
  readonly mapId?: string;
}

And then use your interface as type for the initialization object

Hope it works!

Edit 1: You can also tell TSC "Hey this is a valid google.maps.MapOptions object" using as keyword, but I prefer to use strong typing

{ 
  zoomControl: true,
  disableDefaultUI: true, 
  mapId: '1234' 
} as google.maps.MapOptions

Answered By - WSD