Data Layer: Simple

by henser

HTML

<div id="map"></div>
<div id="info"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2DhtoeGHliBBSaxmyU5WIpV-p-ArSc4g&callback=initMap" async defer></script>

CSS

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#info {
  font-family: Helvetica, Arial;
  position: absolute;
  top: 0;
  left: -200px;
  background-color: rgba(0, 0, 0, .6);
  color: white;
  width: 200px;
  height: 100%;
}

.infoInner {
  padding: 30px 10px;
}

JavaScript

// creates global scope map and info panel variables
var map;

// init map function
function initMap() {
	var info = document.getElementById('info');

  // map setup
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {
      lat: 20,
      lng: 0
    }
  });

  // load data to map using GM loadGeoJson method
  map.data.loadGeoJson('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');

  // style map markers from pins to circles
  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: circleMarker(magnitude)
    };
  });
  
  // open info window on click
  map.data.addListener('click', function(event) {

    // prepare variables with info to be displayed in info panel
    var time = new Date(event.feature.getProperty("time")),
      coordinates = Math.round(event.feature.getGeometry().get().lat() * 1000) / 1000 + ', ' + Math.round(event.feature.getGeometry().get().lng() * 1000) / 1000,
      mag = event.feature.getProperty("mag"),
      infoHTML = '<div class="infoInner"><h1>Info</h1><strong>Place: </strong>' + event.feature.getProperty("place") + '<br/><strong>Date: </strong>' + time + '<br/><strong>Coordinates: </strong>' + coordinates + '<br/><strong>Magnitude: </strong>' + mag + '</div>';

		// place info inside info panel
    info.innerHTML = infoHTML;
    
   // open info panel if not already opened
    if (!info.classList.contains('open')) {
      infoPanel();
    }

  });

  // close any open info panel on map click
  map.addListener('click', function(event) {
    if (info.classList.contains('open')) {
      infoPanel();
    }
  });
}

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

// function to open/close info panel
function...