US State Map using the GeoChart from the Google Chart Tools

us_geo_chart_google

// GeoChart from https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

// Try out by pasting code into: https://code.google.com/apis/ajax/playground/?type=visualization#geo_chart

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Foo Factor'],
    ['US-IL', 200],
    ['US-IN', 300],
    ['US-IA', 20],
    ['US-RI', 150]
  ]);

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, {width: 556, height: 347, region: "US", resolution: "provinces"});
}

🍬

Thanks for this. Had to make a chart the other day and this is where I found the information on how to do it. Here's my copy and paste of all the states for anybody who wants to save a couple of minutes. Just enter a title for your stats and your stats.

['State', 'Stats'],
['US-AL', ],
['US-AK', ],
['US-AZ', ],
['US-AR', ],
['US-CA', ],
['US-CO', ],
['US-CT', ],
['US-DE', ],
['US-DC', ],
['US-FL', ],
['US-GA', ],
['US-HI', ],
['US-ID', ],
['US-IL', ],
['US-IN', ],
['US-IA', ],
['US-KS', ],
['US-KY', ],
['US-LA', ],
['US-ME', ],
['US-MT', ],
['US-NE', ],
['US-NV', ],
['US-NH', ],
['US-NJ', ],
['US-NM', ],
['US-NY', ],
['US-NC', ],
['US-ND', ],
['US-OH', ],
['US-OK', ],
['US-OR', ],
['US-MD', ],
['US-MA', ],
['US-MI', ],
['US-MN', ],
['US-MS', ],
['US-MO', ],
['US-PA', ],
['US-RI', ],
['US-SC', ],
['US-SD', ],
['US-TN', ],
['US-TX', ],
['US-UT', ],
['US-VT', ],
['US-VA', ],
['US-WA', ],
['US-WV', ],
['US-WI', ],
['US-WY', ]

I love you! Thanks!

Hello,

Has anybody attempted to create a state chart using zip codes? i.e using Region= 'US-NY' and zip codes
Please let me know. Thanks.

Here's a a thread with some talk of custom maps (counties and a little bit of zip codes)

The list provided by doxtad also works with state names, which I think is easier to read when hovering:

['State', 'Stats'],
['Alabama', ],
['Alaska', ],
['Arizona', ],
['Arkansas', ],
['California', ],
['Colorado', ],
['Connecticut', ],
['Delaware', ],
['Florida', ],
['Georgia', ],
['Hawaii', ],
['Idaho', ],
['Illinois', ],
['Indiana', ],
['Iowa', ],
['Kansas', ],
['Kentucky', ],
['Louisiana', ],
['Maine', ],
['Maryland', ],
['Massachusetts', ],
['Michigan', ],
['Minnesota', ],
['Mississippi', ],
['Missouri', ],
['Montana', ],
['Nebraska', ],
['Nevada', ],
['New Hampshire', ],
['New Jersey', ],
['New Mexico', ],
['New York', ],
['North Carolina', ],
['North Dakota', ],
['Ohio', ],
['Oklahoma', ],
['Oregon', ],
['Pennsylvania', ],
['Rhode Island', ],
['South Carolina', ],
['South Dakota', ],
['Tennessee', ],
['Texas', ],
['Utah', ],
['Vermont', ],
['Virginia', ],
['Washington', ],
['West Virginia', ],
['Wisconsin', ],
['Wyoming', ]

Thank for the states, they really spared me time.

@paulwasit Great add. Thank you!

Thanks!

Hello Guys,

Actually I need to display the map for US-NY with area within it by border/ markers.

The Geochart only support to show the map with US-NY but it is not going to display the markers/region with in New york.

please refer the following code snippet, and let me know, if I am wrong.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['geomap']});
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Area', 'Popularity'],          
          ['Buffalo', 300],
          ['Syracuse', 400]          
        ]);

        var options = {};
        options['dataMode'] = 'markers';
        options['region'] = 'US-NY';
          //options['resolution'] = 'provinces';  
          // options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
     

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
        </script>

Is it possible to show the GeoChart on districts level for United State atleast.

Thanks & Regards,
Shrikant

Is there a solution to this, or is it not possible with google charts? Would be really useful to be able to show a zoomed in map of one state...

Ooh, just got it to work, with the following options:

dataMode: 'markers',
resolution: 'provinces',
region: 'US-FL'

The list provided by doxtad also works with state names, which I think is easier to read when hovering:

['State', 'Stats'],
['Alabama', ],
['Alaska', ],
['Arizona', ],
['Arkansas', ],
['California', ],
['Colorado', ],
['Connecticut', ],
['Delaware', ],
['Florida', ],
['Georgia', ],
['Hawaii', ],
['Idaho', ],
['Illinois', ],
['Indiana', ],
['Iowa', ],
['Kansas', ],
['Kentucky', ],
['Louisiana', ],
['Maine', ],
['Maryland', ],
['Massachusetts', ],
['Michigan', ],
['Minnesota', ],
['Mississippi', ],
['Missouri', ],
['Montana', ],
['Nebraska', ],
['Nevada', ],
['New Hampshire', ],
['New Jersey', ],
['New Mexico', ],
['New York', ],
['North Carolina', ],
['North Dakota', ],
['Ohio', ],
['Oklahoma', ],
['Oregon', ],
['Pennsylvania', ],
['Rhode Island', ],
['South Carolina', ],
['South Dakota', ],
['Tennessee', ],
['Texas', ],
['Utah', ],
['Vermont', ],
['Virginia', ],
['Washington', ],
['West Virginia', ],
['Wisconsin', ],
['Wyoming', ]

is there a way to spell out DC? I tried Washington DC and Washington D.C., didn't work.

If you do resolution: "metros" in options it divides each state into districts.
The only thing I can't find is a list of the name of the districts that are recognized by Google Charts. If anyone can find this it would be very helpful! Ideally, I would like to use county names

If you do resolution: "metros" in options it divides each state into districts. The only thing I can't find is a list of the name of the districts that are recognized by Google Charts. If anyone can find this it would be very helpful! Ideally, I would like to use county names

Check out what I found about metros: google/google-visualization-issues#938 (comment).