Earthquake circles

by Dörnesz Tamás

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  
$.getJSON("http://spreadsheets.google.com/feeds/list/1NNBXlFZFrSyLCLeuz3ZfV5qes2Rw7H5kdDLJYxjQhlY/od6/public/values?alt=json", function(data) {
  //first row "title" column
  document.write('· alap: '+data.feed.entry[0]['gsx$betores']['$t']);
});

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src = 'https://spreadsheets.google.com/feeds/list/1NNBXlFZFrSyLCLeuz3ZfV5qes2Rw7H5kdDLJYxjQhlY/od6/public/values?alt=json-in-script';
document.getElementsByTagName('head')[0].appendChild(script);

  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });
  
  eqfeed_callback({"type":"FeatureCollection","features":[
{
  "type":"Feature",
  "properties":{"mag":4,"place":"48km SSE of Pondaguitan, Philippines" },
  "geometry":{"type":"Point","coordinates":[126.3832,5.9775]}
},
{
  "type":"Feature",
  "properties":{"mag":3,"place":"48km SSE of Pondaguitan, Philippines" },
  "geometry":{"type":"Point","coordinates":[12.0832,5.0775]}
},
{
  "type":"Feature",
  "properties":{"mag":5,"place":"48km SSE of Pondaguitan, Philippines" },
  "geometry":{"type":"Point","coordinates":[30.0832,5.0775]}
},
{
  "type":"Feature",
  "properties":{"mag":5,"place":"48km SSE of Pondaguitan, Philippines" },
  "geometry":{"type":"Point","coordinates":[40.0832,5.0775]}
}

]});

}



function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

function...