javascriptgeomap

how to provide United States State code instead of country code in a geo map?


I was trying to identify and coloring US states in the basis of some values. But it takes only country code. I tried the below code-

 var geomap_chartdata = google.visualization.arrayToDataTable([
            ['States', 'Popularity'],
            ['ID', 200],
            ['IN', 300],
            ['KY', 400],
            ['LA', 500],
            ['MA', 600],
            ['MT', 600],
            ['OH', 600],
            ['NY', 600],
            ['WA', 700]
        ]);

        var options = {};
        options['displayMode'] = 'regions';
 var chart = new google.visualization.GeoChart(document.getElementById('revenue_inbound_map'));
        chart.draw(geomap_chartdata, options);

But this is not working. Instead of recognizing the State codes geo map identify those as country code. Please help me to fix this.


Solution

  • In the options you need to mention what is it that you are looking for and also the resolution. So, give the region as US and display mode as regions. Try this:

      google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);
    
      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['States', 'Popularity'],
            ['ID', 200],
            ['IN', 300],
            ['KY', 400],
            ['LA', 500],
            ['MA', 600],
            ['MT', 600],
            ['OH', 600],
            ['NY', 600],
            ['WA', 700]
        ]);
    
    
    
         var opts = {
          region: 'US',
          displayMode: 'regions',
          resolution: 'provinces',
          width: 640, 
          height: 480
        };
    
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
    
        chart.draw(data, opts);
      }