javascript - Can't figure out js for customizing google map. -

i'm fresh of boat when comes js. map appears in place, styling doesn't work.

it keeps telling me have code , not enough information i'm writing go away.

    function initialize() {          var mapcanvas = document.getelementbyid('map-canvas');         var mapoptions = {           center: new google.maps.latlng(34.695301,-82.401196),           zoom: 15,           maptypeid: google.maps.maptypeid.roadmap         }         var map = new google.maps.map(mapcanvas, mapoptions)       }         google.maps.event.adddomlistener(window, 'load', initialize);            [   {     "featuretype": "landscape.natural",     "stylers": [       { "color": "#2e2d2d" }     ]   },{     "elementtype": "labels.text.stroke",     "stylers": [       { "visibility": "off" }     ]   },{     "elementtype": "labels.text.fill",     "stylers": [       { "color": "#facf0b" }     ]   },{     "featuretype": "road.local",     "elementtype": "labels.text.fill",     "stylers": [       { "color": "#808080" }     ]   },{     "featuretype": "road.arterial",     "elementtype": "labels",     "stylers": [       { "color": "#808080" }     ]   },{   } ] 

you need set style

  map.set('styles', [   {     featuretype: 'road',     elementtype: 'geometry',     stylers: [       { color: '#000000' },       { weight: 1.6 }     ]   }]); 

use variable create map (var map) , set style.

example:

var styles = [   {     stylers: [       { hue: "#00ffe6" },       { saturation: -20 }     ]   },{     featuretype: "road",     elementtype: "geometry",     stylers: [       { lightness: 100 },       { visibility: "simplified" }     ]   },{     featuretype: "road",     elementtype: "labels",     stylers: [       { visibility: "off" }     ]   } ];  map.setoptions({styles: styles});