JSFiddle - React, Tailwind, and code Playground
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 * FROM CSV("https://cdn.rawgit.com/albertyw/avenews/master/old/data/average-latitude-longitude-countries.csv",{headers:true}) WHERE Latitude BETWEEN 0 AND 25', [], function(country){
var mapOptions = { zoom : 1, center : new google.maps.LatLng(40, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < country.length; i++) {
var opts = {
strokeColor : '#000000',
fillColor : ["red","green","blue","brown"][i%4],
fillOpacity : 0.35,
map : map,
center : new google.maps.LatLng(country[i].Latitude,country[i].Longitude),
radius : 100000
};
new google.maps.Circle(opts);
}
});
}
// google.maps.event.addDomListener(window, 'load', initialize);
initialize();