Intensity map using google visualization

Question

I want to create a map that can fill up the states of US with different shades of a color depending on the number of users in that state. Here is the code that I have

<html>
<head>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geomap']});
   google.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['State', 'No of Users'],
        ['PA', 200],
        ['CA', 300],
        ['NY', 400],
        ['TX', 500],
        ['SC', 600],
        ['MD', 700]
      ]);

      var options = {};
      options['region'] = 'US'
      options['dataMode'] = 'regions';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
  };
  </script>
</head>

<body>
  <div id='map_canvas'></div>
</body>

</html>

Using full state names is also not working. I tried to do this on the google visualization code playground and I followed the examples given here and this stackoverflow question. I can see a map of US and when I mouse over a state it gets highlighted but I am not seeing the states colored according to their intensity.

Thank You

score 1 · Accepted Answer · answered Mar 02 '14 at 21:48

You have to define US states with US prefix:

var data = google.visualization.arrayToDataTable([
    ['State', 'No of Users'],
    ['US-PA', 200],
    ['US-CA', 300],
    ['US-NY', 400],
    ['US-TX', 500],
    ['US-SC', 600],
    ['US-MD', 700]
]);

See ISO 3166-2:US

score 1 · Answer 2 · answered Mar 03 '14 at 16:43

First, you should use the GeoChart visualization instead of GeoMap, as GeoMaps are deprecated. Then, set the resolution option to 'provinces' to get a state map:

function drawMap() {
    var data = google.visualization.arrayToDataTable([
        ['State', 'No of Users'],
        ['PA', 200],
        ['CA', 300],
        ['NY', 400],
        ['TX', 500],
        ['SC', 600],
        ['MD', 700]
    ]);

    var options = {
        region: 'US',
        dataMode: 'regions',
        resolution: 'provinces'
    };

    var container = document.getElementById('map_canvas');
    var geomap = new google.visualization.GeoChart(container);
    geomap.draw(data, options);
};
google.load('visualization', '1', {packages:['geochart'], callback: drawMap});

See it working here: http://jsfiddle.net/asgallant/MxFX2/

Intensity map using google visualization

2 Answers2