Google Geo maps example

by Nimeshka Srimal

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="submit">Draw Map</button>

<div id="status"></div>
<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();
  
 	$.ajax({
        url:'/echo/js/?js=%5B%5B%22Country%22%2C%22Visited%22%5D%2C%5B%22al%22%2C1%5D%2C%5B%22fi%22%2C1%5D%2C%5B%22ru%22%2C1%5D%5D',
        complete: function (response) {
            var countryArray = JSON.parse(response.responseText);
            drawRegionsMap(countryArray);
        },
        error: function () {
            $('#status').html('Error getting data from the server!');
        },
    });
});