angularangular-google-maps

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.

Solution

  • 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