How to add a U.S. Map to your Blog Post

The below video will show you a quick and easy way to add an interactive United States map to your blog post. In this example, I used publicly available data from the USAHockey.org website to build a map of player registrations by state. Remember, you do not have to understand how the code works to use it on your blog.

Interactive Map and Code Snippet

USA Hockey Registrations by State for the 2015-2016 Season


<code>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
     google.charts.load('current', {'packages':['geochart']});
     google.charts.setOnLoadCallback(drawRegionsMap);
     function drawRegionsMap() 
      {
         var data = google.visualization.arrayToDataTable([
         ['State', 'Registrations'],
         ['US-AK ', 8755],
         ['US-AL ', 1564],
         ['US-AR ', 421],
         ['US-AZ ', 7510],
         ['US-CA ', 28296],
         ['US-CO ', 13777],
         ['US-CT ', 13175],
         ['US-DC ', 1159],
         ['US-DE ', 949],
         ['US-FL ', 13276],
         ['US-GA ', 2080],
         ['US-HI ', 22],
         ['US-IA ', 3603],
         ['US-ID ', 3372],
         ['US-IL ', 31558],
         ['US-IN ', 6371],
         ['US-KS ', 1546],
         ['US-KY ', 1611],
         ['US-LA ', 511],
         ['US-MA ', 49087],
         ['US-MD ', 9588],
         ['US-ME ', 6688],
         ['US-MI ', 50022],
         ['US-MN ', 57107],
         ['US-MO ', 7284],
         ['US-MS ', 242],
         ['US-MT ', 4583],
         ['US-NC ', 6730],
         ['US-ND ', 6461],
         ['US-NE ', 1931],
         ['US-NH ', 6000],
         ['US-NJ ', 18978],
         ['US-NM ', 1373],
         ['US-NV ', 1305],
         ['US-NY ', 49921],
         ['US-OH ', 14954],
         ['US-OK ', 1113],
         ['US-OR ', 2647],
         ['US-PA', 30799],
         ['US-RI ', 4535],
         ['US-SC ', 1914],
         ['US-SD ', 2933],
         ['US-TN ', 3662],
         ['US-TX ', 13384],
         ['US-UT ', 4144],
         ['US-VA ', 10291],
         ['US-VT ', 4618],
         ['US-WA ', 9015],
         ['US-WI ', 18529],
         ['US-WV ', 1134],
         ['US-WY ', 2055],
      ]);
    var options = {
    region: 'US',
    displayMode: 'regions',
    resolution: 'provinces',
    colorAxis: {colors: ['#CDE7F0', '#7997A1']},
    };
var chart = new google.visualization.GeoChart(document.getElementById('geochart'));
chart.draw(data, options);
}
</script>
<div id="geochart" style="width: 100%; height: 500px;"></div>
</code>

1928.us

Subscribe now and we will let you know when we post something cool!

Powered by ConvertKit