Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
US State Map using the GeoChart from the Google Chart Tools
// 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"});
}
@bronze

This comment has been minimized.

Copy link

bronze commented May 4, 2014

thank you! that was hard to find on the docs

@dimerman

This comment has been minimized.

Copy link

dimerman commented Sep 3, 2014

👍

@jasonherndon

This comment has been minimized.

Copy link

jasonherndon commented Sep 5, 2014

Awesome - thanks. This should totally be added to the Google documentation for how to implement US maps.

@georgerussellpruitt

This comment has been minimized.

Copy link

georgerussellpruitt commented Oct 13, 2014

Agreed on Google documentation... now I just need to know how to show a states counties >.>

@georgerussellpruitt

This comment has been minimized.

Copy link

georgerussellpruitt commented Oct 13, 2014

Apparently there is no support at a county level.

@rubycut

This comment has been minimized.

Copy link

rubycut commented Jul 11, 2015

Cool.

@gshaw

This comment has been minimized.

Copy link

gshaw commented Sep 21, 2015

🍬

@doxtad

This comment has been minimized.

Copy link

doxtad commented Nov 25, 2015

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', ]

@BritneyMuller

This comment has been minimized.

Copy link

BritneyMuller commented Feb 11, 2016

I love you! Thanks!

@zatopek8848

This comment has been minimized.

Copy link

zatopek8848 commented Jul 25, 2016

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.

@mlwyatt

This comment has been minimized.

Copy link

mlwyatt commented Aug 2, 2016

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

@sebastienplat

This comment has been minimized.

Copy link

sebastienplat commented Sep 1, 2016

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', ]

@pridemusvaire

This comment has been minimized.

Copy link

pridemusvaire commented Sep 30, 2016

Thank for the states, they really spared me time.

@tedmiston

This comment has been minimized.

Copy link

tedmiston commented Nov 21, 2016

@paulwasit Great add. Thank you!

@vhsalazar

This comment has been minimized.

Copy link

vhsalazar commented Feb 17, 2017

Thanks!

@SFFreelancer

This comment has been minimized.

Copy link

SFFreelancer commented Feb 28, 2017

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>
@SFFreelancer

This comment has been minimized.

Copy link

SFFreelancer commented Feb 28, 2017

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

Thanks & Regards,
Shrikant

@soynog

This comment has been minimized.

Copy link

soynog commented Nov 30, 2017

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...

@soynog

This comment has been minimized.

Copy link

soynog commented Nov 30, 2017

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

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

This comment has been minimized.

Copy link

bluevisor commented Mar 7, 2020

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.

@mrbrianevans

This comment has been minimized.

Copy link

mrbrianevans commented Apr 18, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.