Google Geo maps example

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<form action="#" method="post">
  <table width="100%">
    <tr class=main>
      <td width=190>
        <input type=checkbox name="countries[]" value="al"> Albania
      </td>
      <td width=190>
        <input type=checkbox name="countries[]" value="fi"> Finland
      </td>
      <td width=190>
        <input type=checkbox name="countries[]" value="lu"> Luxembourg
      </td>
      <td width=190>
        <input type=checkbox name="countries[]" value="ru"> Russia
      </td>
    </tr>
 </table>
<br/>

<button id="submit">submit</button>

<div id="geochart-colors"></div>

JavaScript

google.charts.load('current', {
   'packages':['geochart'],
   'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
 });
 
 google.charts.setOnLoadCallback(drawRegionsMap);

 function drawRegionsMap(countryArray) {
   var data = google.visualization.arrayToDataTable(countryArray);
   var options = {
   colorAxis: {colors:['green','green']},
   legend: 'none',
   backgroundColor: '#cce5ff',
   defaultColor: '#f5f5f5',
   datalessRegionColor: 'white',
   };

   var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
   chart.draw(data, options);
 };
 
 document.getElementById("submit").addEventListener("click", function(e){
 e.preventDefault();
 var countryArray = [['Country',   'Visited']];
 var visitedCountries = document.getElementsByName('countries[]');
 
	for(var i = 0; i < visitedCountries.length; ++i)
  {
      if(visitedCountries[i].checked){
        countryArray.push([visitedCountries[i].value, 1]);
      }
  }
 
 	drawRegionsMap(countryArray);
});