Styling von Google Karte

Question

Ich habe meine Karte in einer Website, jetzt möchte ich die Farbe von Google Map zu dark ändern, wie in Google Maps gegeben. Ich versuche, dies zu tun, aber nicht wissen, wo gegeben Stil Ich habe anwenden meinen Code von init Karte .Ich denke, ist, ich habe in diesem

_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 ändern ich tue nach diesem

https://mapstyle.withgoogle.com/ 

Answer 1

https://mapstyle.withgoogle.com/ ist nur ein Tool, mit dem Sie den JSON erstellen können, den Sie zum Formatieren Ihrer Kartenimplementierung benötigen.

Sie sollten die style reference guide lesen.

Die einfachste Implementierung ist wie folgt. Der JSON-Stil, den Sie exportiert haben, befindet sich in der styles-Eigenschaft der .

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>