mapCoverage.html

<!DOCTYPE html>
<html>
  <head>
    <style>
	html, body {
		margin: auto; padding: 0;
	}
	#map {
		height :100vh;
		width: 100%;
	}
	@media screen and (max-width: 999px) { 
		.popinfo {
			font-size: 2em;
		}
	}
	@media screen and (min-width: 1000px) { 
		.popinfo {
			font-size: 1em;
		}
	}
	   
    </style>
	<title>SPM: Coverage</title>
	</head>
  <body>
    <div id="map"></div>
    <script>
    String.prototype.hashCode = function() {
      var hash = 0, i, chr, len;
      if (this.length === 0) return hash;
      for (i = 0, len = this.length; i < len; i++) {
        chr   = this.charCodeAt(i);
        hash  = ((hash << 5) - hash) + chr;
        hash |= 0; // Convert to 32bit integer
      }
      return hash;
    };

    function processPoints(geometry, callback, thisArg) {
      if (geometry instanceof google.maps.LatLng) {
        callback.call(thisArg, geometry);
      } else if (geometry instanceof google.maps.Data.Point) {
        callback.call(thisArg, geometry.get());
      } else {
        geometry.getArray().forEach(function(g) {
          processPoints(g, callback, thisArg);
        });
      }
    }

      function initMap() {

        var seattledt = {lat: 47.60763873, lng: -122.33001861};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          center: seattledt
        });

        // Color Capital letters blue, and lower case letters red.
        // Capital letters are represented in ascii by values less than 91
        map.data.setStyle(function(feature) {
            var label = feature.getProperty('label');
            var seed = label.hashCode();
            var x = Math.sin(seed) * 10000;
            x -= Math.floor(x);
            var color = '#'+Math.floor(x*16777215).toString(16);
		  var fcolor = feature.getProperty('color');
            return {
              fillColor: fcolor,
			  fillOpacity: 0.3,
              strokeColor: '#000000',
              strokeWeight: 1,
			  strokeOpacity: 0.5
            };
        });

        // When the user clicks, set 'isColorful', changing the color of the letters.
        map.data.addListener('click', function(event) {
		
          var infowindow = event.feature.getProperty('info');
          if (!infowindow) {
            var label = event.feature.getProperty('label');
            var contentString = '<div id="content" class="popinfo">'+
                label +
                '</div>';

            infowindow = new google.maps.InfoWindow({
              content: contentString
            });

            var bounds = new google.maps.LatLngBounds();
            processPoints(event.feature.getGeometry(), bounds.extend, bounds);
            infowindow.setPosition(bounds.getCenter());

            event.feature.setProperty('info', infowindow);
          }
          infowindow.open(map);
		  
		  
        });

        // When the user hovers, tempt them to click by outlining the letters.
        // Call revertStyle() to remove all overrides. This will use the style rules
        // defined in the function passed to setStyle()
        map.data.addListener('mouseover', function(event) {
          map.data.revertStyle();
         // map.data.overrideStyle(event.feature, {fillOpacity: 0.2,fillColor:'#FF0000',strokeOpacity: 0.5,strokeWeight: 2});
          map.data.overrideStyle(event.feature, {fillOpacity: 0.5,strokeOpacity: 1,strokeWeight: 1});
        });
		
		
        map.data.addListener('mouseout', function(event) {
          map.data.revertStyle();
        });
/*
        map.data.setStyle(function(feature) {
		  var fcolor = event.feature.getProperty('color');
          return {fillColor: fcolor,fillOpacity: 0.1,strokeOpacity: 0.3,strokeWeight: 1};
        });
*/

        map.data.loadGeoJson('js/SPM-Coverage.geojson');

		
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-ZeHg9qi3j2TDI2kdOmfEdYvXnexH5WQ&callback=initMap" type="text/javascript"></script>

  </body>
</html>