JSFiddle - React, Tailwind, and code Playground

MICS Google Maps (Light)

by Josh Leverington

HTML

<div id="map"></div>
<div id="legend"></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=myMap">


</script>

CSS

#map {
  height: 650px;
  width: 850px;
}

html,
body {
  background-color: black;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#content {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: white;
}

#content > #header {
  padding: 8px;
  font-size: 17px;
  border-radius: 4px;
}

#content > #header a {
  color: white;
  font-weight: normal;
  text-decoration: none;
}

#content #link-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: white;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 5px;
}

#content > div {
  padding: 8px;
  font-size: 13px;
}

#content #host-wrapper {
  padding: 0 8px;
}

#content #host-history {
  font-weight: bold;
}

#content #host-wrapper td {
  padding-left: 10px;
  font-size: 13px;
}

body,
html {
  background-color: black;
}

#legend {
  background: #FFFFFF;
  padding: 10px;
  margin: 10px;
  border: 3px solid #000000;
}

#legend div:first-child {
  margin-top: 0;
  font-size: 16px;
  font-weight: bold;
}

#legend div:not(:first-child) {
  margin-top: 3px;
}

#legend img {
  vertical-align: middle;
}

JavaScript

var hostInfo, hostColors, statesObj, infoWindow, solidBorderPts;

var myMap = function() {
  var mapCanvas, mapOptions, map, hostIdx, currHost;
  var legend, idx, name, icon, itemDiv;

  solidBorderPts = [new google.maps.LatLng(42.5055, -96.4847),
    new google.maps.LatLng(42.4599, -96.3995),
    new google.maps.LatLng(42.3667, -96.4050),
    new google.maps.LatLng(42.2722, -96.3446),
    new google.maps.LatLng(42.2051, -96.3625),
    new google.maps.LatLng(41.9983, -96.2416),
    new google.maps.LatLng(41.9513, -96.1372),
    new google.maps.LatLng(41.7662, -96.0741),
    new google.maps.LatLng(41.6267, -96.0988),
    new google.maps.LatLng(41.4561, -95.9477),
    new google.maps.LatLng(41.2819, -95.8804),
    new google.maps.LatLng(41.0338, -95.8653),
    new google.maps.LatLng(40.8346, -95.8365),
    new google.maps.LatLng(40.6775, -95.8461),
    new google.maps.LatLng(40.5837, -95.7610),
    new google.maps.LatLng(40.5848, -95.7623),
    new google.maps.LatLng(40.5785, -93.5445),
    new google.maps.LatLng(40.6129, -91.7372),
    new google.maps.LatLng(40.5545, -91.6768),
    new google.maps.LatLng(40.5451, -91.6246),
    new google.maps.LatLng(40.3622, -91.4365),
    new google.maps.LatLng(40.4637, -91.3623),
    new google.maps.LatLng(40.5482, -91.4021),
    new google.maps.LatLng(40.6931, -91.1124),
    new google.maps.LatLng(40.8107, -91.1028),
    new google.maps.LatLng(40.9218, -90.9668),
    new google.maps.LatLng(41.1642, -91.0121),
    new google.maps.LatLng(41.2406, -91.1082),
    new google.maps.LatLng(41.4067, -91.0451),
    new google.maps.LatLng(41.4510, -90.7086),
    new google.maps.LatLng(41.5178, -90.4793),
    new google.maps.LatLng(41.5908, -90.3419),
    new google.maps.LatLng(41.7457, -90.2788),
    new google.maps.LatLng(41.8164, -90.2074),
    new google.maps.LatLng(41.9023, -90.1538),
    new google.maps.LatLng(42.0962, -90.1744),
    new google.maps.LatLng(42.1441, -90.2692),
    new google.maps.LatLng(42.2905, -90.4298),
    new...