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

Ask Time：2018-06-21T17:48:12 Author：Anil

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.

Author:Anil，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/50965482/how-to-add-custom-google-maps-styling-xml-in-agm-map

Artory :

You have to provide the style directive when you initialize your map :\n\n<agm-map \n[latitude]=\"lat\"\n[longitude]=\"lng\"\n[styles]=\"styles\"\n[zoom]=\"zoom\"\n[disableDefaultUI]=\"false\"\n[zoomControl]=\"false\"\n(mapClick)=\"mapClicked($event)\">\n\n\nwhere styles is the json you downloaded in https://mapstyle.withgoogle.com/\n\nHere is a quick example i created : https://stackblitz.com/edit/angular-google-maps-demo-mgxqnr?file=app/app.component.ts",

2018-06-21T09:58:07

Jhonatan Choto :

Apply JSON style in AGM Google Maps Angular.\n\n **HTML**\n\n <agm-map \n [latitude]=\"latitude\" \n [longitude]=\"longitude\" \n [zoomControl]=\"false\"\n **[styles]=\"styles\">**\n </agm-map>\n\n**TS**\n import { FormControl } from \"@angular/forms\";\n import { MapsAPILoader, LatLngLiteral } from \"@agm/core\";\n c\n\n export class DriverPage implements OnInit {\n\n //Style Map\n **styles= **.JSON (Paste the Json from https://mapstyle.withgoogle.com )**\n [\n {\n \"elementType\": \"geometry\",\n \"stylers\": [\n {\n \"color\": \"#ebe3cd\"\n }\n ]\n }\n ]...\n",

2019-11-26T15:22:40

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