Есть ли способ изменить тему agm-карты на темный режим или просмотр улиц?

Question

Я пытаюсь изменить тему угловой карты на темную, но не могу выполнить. Пожалуйста, помогите .. мой код:

<agm-map [latitude]="latitude" [longitude]="longitude"[zoom]="zoom"[class.dark-theme]="isDark" >

map.component.ts:

isDark = true;

Answer 1

<agm-map [latitude]="lat" [longitude]="lng"  [styles]="mapStyle === 'dark' ? styleDark : styleLight">
    .
    .
    .
</agm-map>

В вашем TS вы будете иметь логику для переключения стилей или вы можете установить стиль по умолчанию

 public darkStyle = [
        {
          "elementType": "geometry",
          "stylers": [
            {
              "hue": "#ff4400"
            },
            {
              "saturation": -100
            },
            {
              "lightness": -4
            },
            {
              "gamma": 0.72
            }
          ]
        },
        {
          "featureType": "road",
          "elementType": "labels.icon"
        },
        {
          "featureType": "landscape.man_made",
          "elementType": "geometry",
          "stylers": [
            {
              "hue": "#0077ff"
            },
            {
              "gamma": 3.1
            }
          ]
        },
        {
          "featureType": "water",
          "stylers": [
            {
              "hue": "#000000"
            },
            {
              "gamma": 0.44
            },
            {
              "saturation": -33
            }
          ]
        },
        {
          "featureType": "poi.park",
          "stylers": [
            {
              "hue": "#44ff00"
            },
            {
              "saturation": -23
            }
          ]
        },
        {
          "featureType": "water",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "hue": "#007fff"
            },
            {
              "gamma": 0.77
            },
            {
              "saturation": 65
            },
            {
              "lightness": 99
            }
          ]
        },
        {
          "featureType": "water",
          "elementType": "labels.text.stroke",
          "stylers": [
            {
              "gamma": 0.11
            },
            {
              "weight": 5.6
            },
            {
              "saturation": 99
            },
            {
              "hue": "#0091ff"
            },
            {
              "lightness": -86
            }
          ]
        },
        {
          "featureType": "transit.line",
          "elementType": "geometry",
          "stylers": [
            {
              "lightness": -48
            },
            {
              "hue": "#ff5e00"
            },
            {
              "gamma": 1.2
            },
            {
              "saturation": -23
            }
          ]
        },
        {
          "featureType": "transit",
          "elementType": "labels.text.stroke",
          "stylers": [
            {
              "saturation": -64
            },
            {
              "hue": "#ff9100"
            },
            {
              "lightness": 16
            },
            {
              "gamma": 0.47
            },
            {
              "weight": 2.7
            }
          ]
        },
        {
          "featureType": "water",
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#222222"
            }
          ]
        },
      ];

      public defaultStyle = [];

Answer 2

Вы можете добавить тему, сделав:

<agm-map [latitude]="latitude" [longitude]="longitude"[zoom]="zoom" [styles]="customTheme">