Cannot see custom Google Map style on my app

Question

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>

what does your map html look like? does this [answer](https://stackoverflow.com/questions/50965482/how-to-add-custom-google-maps-styling-xml-in-agm-map) help you at all? — rhavelka, Dec 02 '20 at 15:32
Have you tried to specify the mapId in the initialization object? — WSD, Dec 02 '20 at 15:37
@guzmanoj There is no such option here? https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions — Sampath, Dec 02 '20 at 15:44
@rhavelka No. I do not use JSON styles here. I use the Cloud tool with the default template. — Sampath, Dec 02 '20 at 15:46

WSD · Accepted Answer · 2020-12-02T16:06:11.253

3

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

edited Dec 02 '20 at 16:06

answered Dec 02 '20 at 15:58

WSD

3,243
26
38

You need to scroll to the very bottom https://developers.google.com/maps/documentation/javascript/using-typescript – WSD Dec 02 '20 at 16:02
This is awesome! Thanks a lot! – Sampath Dec 02 '20 at 16:09

score 0 · Answer 2 · answered Mar 01 '23 at 21:51

These days, mapId is supported in the options object:

// google-map.component.html
<google-map [options]="options"></google-map>

// google-map.component.ts
options: google.maps.MapOptions = {
  center: {lat: 40, lng: -20},
  zoom: 4,
  mapId: 'abcdef...'
};

Cannot see custom Google Map style on my app

2 Answers2