How to set Google Maps styles dynamically

Question

Using the Google Map APi v3 , there are style options such as :

   {
     featureType: 'transit.line',
     elementType: 'geometry',
     stylers: [
        { hue: '#fc0101' },
        { visibility: 'on' }
     ]
    }

This works on map load, as can be seen in the API example: https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple

I need to add a click event to show or change a certain style, for example if I change the above codes hue value on a dom event.

Example code:

// a link to test map changes
var testDiv = document.getElementById("test");

// add click event listener for map
google.maps.event.addDomListener(testDiv, 'click', showTest);

// the function for setZoom works 
function showTest() {
    map.setZoom(2); 
}

I cannot find any documents for setting the style, there is no "set", https://developers.google.com/maps/documentation/javascript/reference#StyledMapType

There is setOptions which includes a styles property but I cannot get it to work.

An example that does not work:

 // turn off transit line visibility on click
function showTest() {
    map.setOptions({
        styles : {
            featureType: 'transit.line',
            elementType: 'geometry',
            stylers: [
                { hue: '#fc0101' },
                { visibility: 'off' }
            ]
        }
    });
}

• Working example with zoom event (just zooms out map): http://codepen.io/anon/pen/yfGxm

• Non Working example with style event (this is set to remove the
  transit line shown in black): http://codepen.io/anon/pen/CphbA

Edit: The answer below is great and I didn't realize this is also documented here: https://developers.google.com/maps/documentation/javascript/styling?csw=1

Answer 1

http://codepen.io/jolsalazar/full/anKqG

Here the example code:

var map;
var chicago = new google.maps.LatLng(41.850033, -87.650052);

function initialize() {

  var roadAtlasStyles = [
    {
      featureType: 'transit.line',
      elementType: 'geometry',
      stylers: [
        { hue: '#ff0000' },
        { visibility: 'on' },
        { lightness: -70 }
      ],
      enableCloseButton: true,
      visible: false
    }
  ];

  var mapOptions = {
    zoom: 12,
    center: chicago,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    }
  };

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

  var styledMapOptions = {
    name: 'US Road Atlas'
  };

  var usRoadMapType = new google.maps.StyledMapType(
      roadAtlasStyles, styledMapOptions);


  map.mapTypes.set('usroadatlas', usRoadMapType);
  map.setMapTypeId('usroadatlas');

  google.maps.event.addDomListener(document.getElementById('test'), 'click', function() {
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
  });

}

jQuery(document).ready(function () {
    google.maps.event.addDomListener(window, 'load', initialize);
});

Answer 2

For me, map.setOptions() works well for setting styles. I think you forgot the [ ] brackets.

You can change map style as followed:

// turn off transit line visibility on click
function showTest() {

    var myStyle =[{
        featureType: 'transit.line',
        elementType: 'geometry',
        stylers: [
            { hue: '#fc0101' },
            { visibility: 'on' }
         ]
    }];

    map.setOptions({styles: myStyle});
}