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

Answer 2

Apply JSON style in AGM Google Maps Angular.

 **HTML**

    <agm-map 
    [latitude]="latitude" 
    [longitude]="longitude" 
    [zoomControl]="false"
    **[styles]="styles">**
    </agm-map>

**TS**
    import { FormControl } from "@angular/forms";
    import { MapsAPILoader, LatLngLiteral } from "@agm/core";
    c

    export class DriverPage implements OnInit {

    //Style Map
    **styles= **.JSON (Paste the Json from https://mapstyle.withgoogle.com )**
     [
        {
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#ebe3cd"
            }
          ]
        }
    ]...

Answer 3

TO make this work in Angular 13 you have to push the styles into an array type MapTypeStyle[] in so the map takes the styles then it will work

 JSON_MAP_STYLES = [
{
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#f5f5f5"
    }
  ]
},
{
  "elementType": "labels.icon",
  "stylers": [
    {
      "visibility": "off"
    }
  ]
},
{
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#616161"
    }
  ]
},
{
  "elementType": "labels.text.stroke",
  "stylers": [
    {
      "color": "#f5f5f5"
    }
  ]
},
{
  "featureType": "administrative.land_parcel",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#bdbdbd"
    }
  ]
},
{
  "featureType": "poi",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#eeeeee"
    }
  ]
},
{
  "featureType": "poi",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#757575"
    }
  ]
},
{
  "featureType": "poi.business",
  "stylers": [
    {
      "visibility": "off"
    }
  ]
},
{
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#e5e5e5"
    }
  ]
},
{
  "featureType": "poi.park",
  "elementType": "labels.text",
  "stylers": [
    {
      "visibility": "off"
    }
  ]
},
{
  "featureType": "poi.park",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#9e9e9e"
    }
  ]
},
{
  "featureType": "road",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#ffffff"
    }
  ]
},
{
  "featureType": "road.arterial",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#757575"
    }
  ]
},
{
  "featureType": "road.highway",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#dadada"
    }
  ]
},
{
  "featureType": "road.highway",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#616161"
    }
  ]
},
{
  "featureType": "road.local",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#9e9e9e"
    }
  ]
},
{
  "featureType": "transit.line",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#e5e5e5"
    }
  ]
},
{
  "featureType": "transit.station",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#eeeeee"
    }
  ]
},
{
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [
    {
      "color": "#c9c9c9"
    }
  ]
},
{
  "featureType": "water",
  "elementType": "labels.text.fill",
  "stylers": [
    {
      "color": "#9e9e9e"
    }
  ]
}

]