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

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.

Can you style Google maps API?

With style options you can customize the presentation of the standard Google map styles, changing the visual display of features like roads, parks, businesses, and other points of interest. As well as changing the style of these features, you can hide features entirely.

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