0

I am trying to implement jqvmap and have multiple regions selected and colored. How do I pass a variable from Rails into this javascript so that the 'selectedRegions' variable will work? I've tried endlessly but can't seem to make the JS read the variable correctly.

JS code:

<script type="text/javascript">
  jQuery(document).ready(function() {
    var areas1=['CA','US'];
      jQuery('#vmap').vectorMap({ 
        map: 'world_en',
        selectedColor: '#FFC864',
        selectedRegions: areas1

      });
  });
  </script>

The selectedRegions variable needs take in format: ['CA', 'US'], but when I pass in this format from my Rails helper method, it does not work. Any JS experts out there with some thoughts would be greatly appreciated!

gitastic
  • 516
  • 7
  • 26

1 Answers1

0

Assuming your controller looks something like this:

def show
  # set an instance variable in the controller
  @areas1 = [ 'CA', 'US' ]

  # render code....
end

in the view your selectedRegions (assuming it's in an erb page) could simply be

<script type="text/javascript">
jQuery(document).ready(function() {
  var areas1=['CA','US'];
    jQuery('#vmap').vectorMap({ 
      map: 'world_en',
      selectedColor: '#FFC864',
      selectedRegions: [<%= @areas1.map {|str| "'#{ str }'" }.join(',') %>]
    });
});
</script>
GSP
  • 3,763
  • 3
  • 32
  • 54
  • Hi GSP! Thanks for your help with this. I tried the exact code you put, but now the map doesn't even load. =/ – gitastic Nov 12 '14 at 22:24
  • What does the rendered HTML look like after doing that? View source in the browser should help you be able to debug things like this. – GSP Nov 13 '14 at 21:38