title: Google Maps with several different colorful styles on one map
body: <p>I want to have Google Maps with several different colorful styles on one map like on 
  <a href="http://demo.mageeklab.com/mgl_colorful_maps/" rel="nofollow">http://demo.mageeklab.com/mgl_colorful_maps/</a> 
  have a look at the controls (top right)
    another example: <a href="http://dauten.server29.vorschauseite.eu/YANDEX.html" rel="nofollow">http://dauten.server29.vorschauseite.eu/YANDEX.html</a> 
    I want to add two styles.
    style 1 (night):</p>
  
  <pre><code>var styles = [
  {
          stylers: [
          { hue: '#ff1a00' },
          { invert_lightness: true },
          { saturation: -100  },
          { lightness: 32 },
          { gamma: 0.47 }
          ]
  },{
      featureType: 'water',
      elementType: 'geometry',
      stylers: [
          { color: '#2D333C' }
      ]
  }
  ];
  map.setOptions({styles: styles});   
  </code></pre>
  
  <p>and style 2 (dark):</p>
  
  <pre><code>var styles = [
  {
      "featureType": "all",
      "elementType": "all",
      "stylers": [
          {
              "invert_lightness": true
          },
          {
              "saturation": -80
          },
          {
              "lightness": 30
          },
          {
              "gamma": 0.5
          },
          {
              "hue": "#3d433a"
          }
      ]
  }
  </code></pre>
  
  <p>];
      map.setOptions({styles: styles});</p>
  
  <p>How can this be done?</p>