如何使用 Google 地图 API 设计其样式

我正在尝试更改 Google 地图的样式，但我不确定如何更改。谷歌给了我这些对象属性：

[
  {
    "stylers": [
      { "hue": "#ff0022" },
      { "saturation": -16 },
      { "lightness": -5 }
    ]
  }
]

但我不确定如何使用以下代码（生成的谷歌地图）使其工作：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:700px;">
  <div id="gmap_canvas" style="height:500px;width:700px;"></div>
  <a class="google-map-data" href="http://www.addmap.org" id="get-map-data">google maps</a>
  <iframe src="http://www.embed-google-map.com/map-embed.php"></iframe>
  <a class="google-map-data" href="http://www.nuckelino.de" id="get-map-data">http://www.nuckelino.de</a></div>
  <script type="text/javascript"> function init_map(){
    var myOptions = {
        zoom:15,
        center:new google.maps.LatLng(51.8476894,-1.355176799999981),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

        map = new google.maps.Map(document.getElementById("gmap_canvas"), 
          myOptions);

        marker = new google.maps.Marker({
          map: map,position: new google.maps.LatLng(51.8476894, -1.355176799999981)});
        infowindow = new google.maps.InfoWindow({
          content:"<div style='position:relative;line-height:1.34;overflow:hidden;white-space:nowrap;display:block;'><div style='margin-bottom:2px;font-weight:500;'>1 Market Street</div><span>1 Market Street <br> OX4 2JR  Woodstock</span></div>"
        });
        google.maps.event.addListener(marker, "click", function(){
          infowindow.open(map,marker);});infowindow.open(map,marker);}
        google.maps.event.addDomListener(window, 'load', init_map);
        </script>

我尝试将它们添加到 myOptions 中，但它不起作用：

    var myOptions = {
        zoom:15,
        center:new google.maps.LatLng(51.8476894,-1.355176799999981),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
  };

这是样式 API 的链接 https://developers.google.com/maps/documentation/javascript/styling?csw=1。但我对此一无所知。有人可以帮忙吗？

您只需将样式器添加到地图选项中（如评论中的链接所述）：

var stylers = [{
  "stylers": [{ 
     "hue": "#ff0022"
   }, {
     "saturation": -16
   }, {
     "lightness": -5
   }]
}];
var myOptions = {
    ...
    styles: stylers
};

Here is your code from above in a fiddle using the stylers -> http://jsfiddle.net/cKQxb/ http://jsfiddle.net/cKQxb/ producing this :