JSFiddle - React, Tailwind, and code Playground

by Xing Wu

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&amp;sensor=true"></script>
<div id='wrap'>
<div id='map'></div>
<div id='stats'>
    Earthquakes: <span id='num'>null</span><br/>
    Date: <span id='time'>null</span>
</div>
</div>

CSS

html, body, #wrap, #map { height: 100%; margin: 0; padding: 0;}
#stats {position:absolute; bottom:0px; left: 0px; color:#000}

JavaScript

var gmap_style_lightgreen= [{"stylers":[{"hue":"#baf4c4"},{"saturation":10}]},{"featureType":"water","stylers":[{"color":"#effefd"}]},{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]}];

var myOptions = {
    zoom: 1,
    center: new google.maps.LatLng(30,0),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: gmap_style_lightgreen
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

var heatmap_data = [];
$.getJSON('http://www.corsproxy.com/earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(rst) {
    $('#num').html(rst.metadata.count);
    var generate_time = new Date(rst.metadata.generated);
    $('#time').html(generate_time.toString());
    $.each(rst.features, function(index, data) {
        var point = {};
        point.location = new google.maps.LatLng(data.geometry.coordinates[1], data.geometry.coordinates[0]);
        point.weight = data.properties.mag;
        heatmap_data.push(point);
    });
});

var heatmap_layer = new google.maps.visualization.HeatmapLayer({
    data: heatmap_data
});

heatmap_layer.setMap(map);