title: Randomly colored US map using JVector
body: <p>I have issues with coding US Map that would allow randomly assing colors to the US states map using JVector API. Here is the code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;script src="scripts/jquery-1.8.2.js"&gt;&lt;/script&gt;
    &lt;script src="scripts/jquery-jvectormap-1.2.2.min.js"&gt;&lt;/script&gt;
    &lt;script src="scripts/jquery-jvectormap-us-aea-en.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;div  id="us-map" style="position: relative;   width: 800px; height: 600px"&gt;&lt;/div&gt;
    &lt;script&gt;
  
    &lt;!--// I commented out this piece of script. It works fine. This is a test trial to load the map
      // $(function(){
      // $('#us-map').vectorMap({map: 'us_aea_en'});
      // });
      --&gt;
  
      &lt;!-- I have issues with the following function --&gt;
  /*it does not even load the map. What it should do is to generate random colors
  * for the map as the "update" button is pressed 
  */
  $(function(){
    var palette = ['#66C2A5', '#FC8D62', '#8DA0CB', '#E78AC3', '#A6D854'];
        generateColors = function(){
          var colors = {},
              key;
  
          for (key in map.regions) {
            colors[key] = palette[Math.floor(Math.random()*palette.length)];
          }
          return colors;
        },
        map;
  
    map = new jvm.USMap({
      map: 'us_aea_en',
      container: $('#map'),
      series: {
        regions: [{
          attribute: 'fill'
        }]
      }
    });
    map.series.regions[0].setValues(generateColors());
    $('#update-colors-button').click(function(e){
      e.preventDefault();
      map.series.regions[0].setValues(generateColors());
    });
  })
      &lt;/script&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the link to my <a href="https://dl.dropboxusercontent.com/u/41007907/scripts.zip" rel="nofollow">scripts folder</a> where I keep the <code>.js</code> files.
  What is wrong with the <code>function()</code>?</p>