Cannot see custom Google Map style on my app


I have done Google map stylings according to this doc:

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



I use Angular Google Maps component here:

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?


<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"


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



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
  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

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published