谷歌地图的样式答案

【问题标题】：styling of google map谷歌地图的样式
【发布时间】：2018-04-12 13:56:48
【问题描述】：

我已将我的地图嵌入网站，现在我想将谷歌地图的颜色更改为 dark，如谷歌地图中所示。我正在尝试这样做，但不知道在哪里给出我必须应用的样式我的初始化映射代码是。我想我必须改变这一点

  _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,
            });

编辑我是按照这个来做的

https://mapstyle.withgoogle.com/

【问题讨论】：

标签： google-maps google-maps-api-3 maps google-maps-api-2

【解决方案1】：

https://mapstyle.withgoogle.com/ 只是一个工具，可帮助您创建所需的 JSON 来设置地图实现的样式。

您应该阅读style reference guide。

最简单的实现如下。您导出的 JSON 样式位于 MapOptions object 的 styles 属性中。

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>

【讨论】：