Geochart U.S. states using Google GeoCharts API
<p>I want to make a U.S. map of selectable states <a href="https://developers.google.com/chart/interactive/docs/gallery/geochart#region-geocharts" rel="noreferrer">similar to what's shown here</a>.</p>

<a href="https://developers.google.com/chart/interactive/docs/gallery/geochart#region-geocharts" rel="noreferrer">Source</a>

<p><a href="https://i.stack.imgur.com/RWGQq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RWGQq.png" alt="enter image description here"></a></p>

<p>Except, instead of multiple countries, I only want to render U.S. states, similar to the following.</p>

<p><a href="https://i.stack.imgur.com/cCsQn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cCsQn.png" alt="enter image description here"></a></p>

<p><a href="http://jsbin.com/jodesitoto/edit?html,output" rel="noreferrer">In this jsBin</a>, I expect to see individual states outlined that highlight upon hovering with some popup text. However, I actually only see a grey background outline of the U.S. with no discernible individual states.</p>

<p>Please provide a working jsBin which accomplishes the task.</p>

http://jsbin.com/jodesitoto/edit?html,output

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;!---- &gt;
    https://developers.google.com/chart/interactive/docs/gallery/geochart#full
    &lt;!----&gt;
    &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['State', 'Select'],
          ['US-AL', 0],
          ['US-AK', 0],
          ['US-AR', 0],
          ['US-AK', 0],
          ['US-AZ', 0],
          ['US-Colorado', 0],
          ['US-CO', 0],
          ['US-DE', 0],
          ['US-FL', 0],
          ['US-HI', 0],
          ['US-KS', 0],
          ['US-KY', 0],
          ['US-MI', 0],
          ['US-MO', 0],
          ['US-MS', 0],
          ['US-MT', 0],
          ['US-NE', 0],
          ['US-NJ', 0],
          ['US-NM', 0],
          ['US-NY', 0],
          ['US-OR', 0],
          ['US-PA', 0],
          ['US-TX', 0],
          ['US-UT', 0],
          ['US-VA', 0],
          ['US-WA', 0],
          ['US-WV', 0],
          ['US-WY', 0],
        ]);

        var options = {
          region: 'US',
          displayMode: 'regions',
        };

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

        chart.draw(data, options);
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="geochart" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>