gmaps.js console

Play with gmaps.js

by ibroom

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;.js"></script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <!---- >
    https://developers.google.com/chart/interactive/docs/gallery/geochart#full
    <!---->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>

  <body>
    <ol>
      <li>Highlight US states</li>
      <li>Tapping a state loads a screen in Fliplet using fliplet.navigate</li>
      <li>Set the high color</li>
      <li>Add to a Fliplet app</li>
    </ol>
    <div id="geochart" style="width: 900px; height: 500px;"></div>
  </body>

</html>

JavaScript

google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['State', 'Staff'],
          ['US-AL', 0],
          ['US-AK', 0],
          ['US-AR', 0],
          ['US-AK', 0],
          ['US-AZ', 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',
          resolution: 'provinces'
        };

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

        chart.draw(data, options);
      }