Google Maps JavaScript APIのスタイルカスタム

gmaps.js

var map;

window.initMap = function() {

  var myLatLng = {
    lat: <%= data.corp.latitude.value %>,
    lng: <%= data.corp.longitude.value %>
  };

  var mapOptions = {
    center: myLatLng,
    zoom: 11,
    panControl: false,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false
  };

  var styles = [
    {
      "featureType": "administrative",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#444444"
        }
      ]
    },
    {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [
        {
          "color": "#f5f5f5"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "all",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "all",
      "stylers": [
        {
          "saturation": "-10"
        },
        {
          "lightness": "0"
        },
        {
          "hue": "#ffd700"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "all",
      "stylers": [
        {
          "visibility": "simplified"
        }
      ]
    },
    {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit",
      "elementType": "all",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "all",
      "stylers": [
        {
          "color": "#172435"
        },
        {
          "visibility": "on"
        }
      ]
    }
  ];

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

  map.setOptions({styles: styles});

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: "The place"
  });

};