How to add custom google maps styling xml in agm-map

Question

I am trying to customize the google maps with the help of https://mapstyle.withgoogle.com/, custom google maps styling.

I am using angular google maps(https://github.com/SebastianM/angular-google-maps) library in my angular app.

I want to include the XML so that the agm-map is displayed with custom styles. But I don't know how to do it in agm-map.

Please help me.

Answer 1

You have to provide the style directive when you initialize your map :

<agm-map 
[latitude]="lat"
[longitude]="lng"
[styles]="styles"
[zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="false"
(mapClick)="mapClicked($event)">

where styles is the json you downloaded in https://mapstyle.withgoogle.com/

Here is a quick example i created : https://stackblitz.com/edit/angular-google-maps-demo-mgxqnr?file=app/app.component.ts