Googleマップのスタイリング

Question

私はウェブサイトで自分のマップを嫌っていましたが、今私はGoogleマップの色を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, 
      }); 

EDITに変更する必要が考える.Iのinitマップの私のコードがある を適用する必要が与えられたスタイルを知って、これをやろうとしたがいけないのです

https://mapstyle.withgoogle.com/ 

Answer 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>