Google Region Map

by andypotanin

HTML

<script src="http://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
    console.log('loading');
    google.load('visualization', '1', {
        'packages': ['geochart']
    });
    google.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
        console.log('drawVisualization');

        var data = google.visualization.arrayToDataTable([
            ['State', 'Popularity'],
            ['US-NC', 200],
            ['US-FL', 300],
            ['US-TX', 400],
            ['US-NY', 500],
            ['US-AL', 600],
            ['US-MN', 700]
        ]);

        var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));

        geochart.draw(data, {
            region: 'US',
            displayMode: 'regions',
            resolution: 'provinces',
            enableRegionInteractivity: true
        });

    }
</script>

CSS

#chart_div {
    width: 300px;
    height: 200px;
    background-color: red;
}