North America ('021') location not displaying the regions properly

[Stepan Lavrinenko]

Hello,

I have a problem of displaying provinces and states in Canada and US at the same time. I want to be able to highlight-on-hover a whole bunch of States and Provinces (just like the main Google GeoCharts example), but while displaying just North America.

Code:

google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

       var data = google.visualization.arrayToDataTable([

          ['State', 'Number of projects'],

         ['US-MT', 200],

         ['US-WA', 500],

         ['CA-AB',300],

         ['CA-BC',400],

         ['CA-ON',100]

        ]);

        var options = {     };

       options['region'] = '021';

       options['resolution']='provinces';

       options['colors'] = ['blue'];

 

     

        var chart1 = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart1.draw(data, options);}

Could not get this to work for me.

However, when I use just Canada or just US, everything works perfectly. Code:

google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

       var data = google.visualization.arrayToDataTable([

          ['State', 'Number of projects'],

         ['US-MT', 200],

         ['US-WA', 500],

         ['CA-AB',300],

         ['CA-BC',400],

         ['CA-ON',100]

        ]);

        var options = {     };

       options['region'] = 'US';
        // options['region'] = 'CA';

        options['resolution']='provinces';

       options['colors'] = ['blue'];

 

     

        var chart1 = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart1.draw(data, options);

Did anyone know how to overcome this issue? Would much appreciate any ideas/ solutions. Thanks!