wordmap.html

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
  crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="./home.html">Home
        <span class="sr-only">(current)</span>
      </a>
      <a class="nav-item nav-link" href="./wordmap.html">Locations</a>
      <a class="nav-item nav-link" href="./timelinev2.html">Timeline</a>
      <a class="nav-item nav-link" href="./who.html">Names</a>
    </div>
  </div>
</nav>
<div class="container" style='padding-left: 2.0em;'>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="regions_div" style="width: 1170px; height: 740px;"></div>

  <script>
    google.charts.load('current', {
      'packages': ['geochart'],
      // Note: you will need to get a mapsApiKey for your project.
      // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
      'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    });
    google.charts.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country', 'Occurrences'],
        ['Germany', 55],
        ['United States', 328],
        ['Brazil', 119],
        ['United Kingdom', 39],
        ['Italy', 39],
        ['Canada', 40],
        ['greenland', 80]
      ]);

      // **
      // Germany --> 55
      // Brazil --> 104
      // UK --> 39
      // US --> 129 + 76 + 45 + 42 + 36 = 328
      // U.S. --> 76
      // USA --> 45
      // America --> 42
      // LA --> 36
      // São Paulo --> 115 + 104 = 119

      var options = {};

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

      chart.draw(data, options);
    }

  </script>
</div>