Geo Chart Example

An example of a Google Geo Chart.

by zakkarygrahamm

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="regions_div" style="width: 900px; height: 500px;"></div>

JavaScript

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([
          ['State', 'Population'],
          ['Cape Town', 3,433,441],
          ['Minnesota', 300],
          ['Alaska', 400],
          ['Texas', 500],
          ['Florida', 600],
          ['Wyoming', 700]
        ]);
        
        var options = {
      region: 'ZA',
      displayMode: 'regions',
      resolution: 'provinces',
    };

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

        chart.draw(data, options);
      }