JSFiddle - React, Tailwind, and code Playground

by Andrey Gershun

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://alasql.org/console/alasql.min.js"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

function initialize() {
    var cityCircle;
alasql('SELECT MATRIX * FROM CSv("https://cdn.rawgit.com/agershun/alasql/version-0.0.36/examples/csv/demo.csv", {headers:false})',[],function(citymap){        
        // Create the map.
        var mapOptions = {
            zoom : 5,
            center : new google.maps.LatLng(37.09024, -95.712891),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

        var fillcolor = [];
        fillcolor[0] = '#FF0000';
        fillcolor[1] = '#FFFF00';
        fillcolor[2] = '#FF00FF';
        fillcolor[3] = '#00FF00';
        fillcolor[4] = '#0000FF';
        var loop = 0;
        console.log(citymap.length);
        for (i = 0; i < citymap.length; i++) {
            console.log(citymap[i][1]);
            var populationOptions = {
                strokeColor : '#000000',
                strokeOpacity : 0.8,
                strokeWeight : 2,
                fillColor : fillcolor[loop],
                fillOpacity : 0.35,
                map : map,
                center : new google.maps.LatLng(+citymap[i][1],+ citymap[i][2]),
                radius : Math.sqrt(+citymap[i][3]) * 100000
            };

            cityCircle = new google.maps.Circle(populationOptions);
            loop = loop + 1;

        }
       });
    }
//    google.maps.event.addDomListener(window, 'load', initialize);
initialize();