デモ:http://mo49.tokyo/qiita/20160517/featureOpts.html
var customMapTypeId = 'custom_style';
var mapOptions = {
zoom: 12,
center: {lat: 40.674, lng: -73.946}, // Brooklyn.
scaleControl: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
},
mapTypeId: customMapTypeId
};
// オリジナルデザイン
var featureOpts = [
{
stylers: [
{ hue: '#FFF700' },
{ visibility: 'simplified' },
{ gamma: 0.5 },
{ weight: 0.5 }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'simplified' }
]
},
{
featureType: 'road.local',
stylers: [
{ color: '#FFF700' }
]
}
];
// オリジナルデザインの名前
var styledMapOptions = {
name: "My Style"
};
// オリジナルデザインをセット
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
ジェネレーターでつくるのが良い
Google Maps Colorizr