styling of google map

Question

I have embedded my map in a website , Now I want to change color of google map to dark , as given in google maps. I am trying to do this but don't know where to given style I have to apply my code of init map is. I think I have to change in this

  _initMap: function() {
            var self= this, options  = this.options,
                centerPosition = new google.maps.LatLng(options.latitude, options.longitude);

            /**
             * map
             * @type {google.maps.Map}
             */
            this.map = new google.maps.Map(this.element[0], {
                zoom: parseFloat(options.zoom_level),
                center: centerPosition,
                minZoom: options.minZoom,
                maxZoom: options.maxZoom
            });

            this.storePopupTmpl = mageTemplate($(options.storePopupTemplate).html());

            /**
             * infor windopw
             * @type {google.maps.InfoWindow}
             */
            this.infowindow = new google.maps.InfoWindow({
                //maxWidth: 250,
                //disableAutoPan: true,
                maxWidth: 450,
                minWidth: 350,
            });

EDIT I am doing according to this

https://mapstyle.withgoogle.com/

Answer 1

https://mapstyle.withgoogle.com/ is just a tool that helps you create the JSON you need to style your map implementation.

You should read the style reference guide.

The easiest implementation is as follow. The JSON style you exported goes in the styles property of the MapOptions object.

var map;

function initialize() {

  // Map Style JSON
  var blueStyle = [{
    'featureType': 'all',
    'elementType': 'labels',
    'stylers': [{
      'visibility': 'off'
    }]
  }, {
    'featureType': 'road',
    'elementType': 'labels.icon',
    'stylers': [{
      'visibility': 'off'
    }]
  }, {
    'stylers': [{
      'hue': '#00aaff'
    }, {
      'saturation': -50
    }, {
      'gamma': 1.15
    }, {
      'lightness': 12
    }]
  }, {
    'featureType': 'road',
    'elementType': 'labels.text.fill',
    'stylers': [{
      'visibility': 'on'
    }, {
      'lightness': 24
    }]
  }, {
    'featureType': 'road',
    'elementType': 'geometry',
    'stylers': [{
      'lightness': 85
    }]
  }];

  var mapOptions = {
    center: new google.maps.LatLng(52.368465, 4.903921),
    zoom: 10,
    styles: blueStyle
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

initialize();

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?callback=initialize"
        async defer></script>