Google Geo Chart for States.

by marium_ladha

HTML

<script src="https://www.google.com/jsapi"></script>
<div style="float:left">
    <div id="chart_div"></div> 
    <button class="reset" onClick="drawRegionsMap();$('#table').html('');">Reset</button>
</div>
<div class='state-data'>
    <div id="table" style="width: 300px; height: 300px;"></div>
</div>

CSS

.state-data {
            width:9000px;
            float:left;
            margin-left:50px;
        }
        .name {
            border:dotted 1px #ccc;
            padding:5px;
            border-right:0;
            float:left;
            width:calc(60% - 11px)
        }
        .views {
            border:dotted 1px #ccc;
            padding:5px;
            float:left;
            width:calc(40% - 12px);
            text-align:right
        }

JavaScript

google.load('visualization', '1', { 'packages': ['geochart', 'table'] });
    google.setOnLoadCallback(drawRegionsMap);
    var currentRegion;
    function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
            // Results For US States
            // State format must be "US-**"
            // US represents region, while the ** section represents the individual state 
          ['Country', 'Views'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
 
        ]);
 
        var view = new google.visualization.DataView(data)
        view.setColumns([0, 1])
 
 
 
        var chart = new google.visualization.GeoChart(
        document.getElementById('chart_div'));
        chart.draw(data, options);
 
       var geochart = new google.visualization.GeoChart(
            document.getElementById('chart_div'));
            var options = { 
                width: 556,
                height: 347,
                colorAxis: {colors: ['#acb2b9', '#2f3f4f']} // Map Colors 
            };
 
       google.visualization.events.addListener(geochart,'regionClick', function (eventData) {
            // maybe you want to change the data table here...
            currentRegion = eventData.region;
            options['region'] = eventData.region;
            options['resolution'] = 'provinces';
            
                // Add Results for Individual State
                // Format needs to match what is below so that it locates the correct position
                // Additional information can be added to array
                // Uses first value in 2nd column to determine scale for markers
            if(currentRegion == 'US') {
                //If it is a US State
                var data = google.visualization.arrayToDataTable([
                   ['State', 'Views'],
                   ['North Carolina', 300],
                  ...