JSFiddle - React, Tailwind, and code Playground

MICS Google Map (Dark)

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: 600px;
  width: 900px;
}

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 !important;
  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: 14px !important;
  font-weight: normal !important;
}

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

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

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

#legend {
  background: #4D6059;
  padding: 10px;
  margin: 10px;
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
}

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

#legend table td {
  padding: 10px 20px 0 0;
  font-size: 13px;
  color: #FFFFFF;
}

#legend table img {
  vertical-align: middle;
}

JavaScript

//All Borders w/ Legend
/*global window,document,google*/
var hostInfo, hostColors, statesObj, infoWindow, solidBorderPts, dashedBorderPts;

var myMap = function() {
  var mapCanvas, mapOptions, map, hostIdx, currHost;

  initializeHostData();
  initializeBorderData();

  mapCanvas = document.getElementById("map");
  mapOptions = {
    center: getMapCenter(),
    zoom: getMapZoom(),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    styles: getMapStyle()
  };

  map = new google.maps.Map(mapCanvas, mapOptions);
  for (hostIdx = 0; hostIdx < hostInfo.length; hostIdx += 1) {
    currHost = hostInfo[hostIdx];
    addHostMarker(map, currHost);
  }

  addBorder(map, solidBorderPts);

  addDashedBorder(map, dashedBorderPts[0]);
  addDashedBorder(map, dashedBorderPts[1]);
  addDashedBorder(map, dashedBorderPts[2]);
  addDashedBorder(map, dashedBorderPts[3]);

  createLegend(map);
  createCenterControl(map);
};

var createLegend = function(map) {
  var legendEl, tableEl, rowEl, itemEl, idx, name, icon;

  legendEl = document.getElementById("legend");

  if (isMobile()) {
    legendEl.parentNode.removeChild(legendEl);
    return;
  }

  itemEl = document.createElement("div");
  itemEl.innerHTML = "Site Hosted";
  legendEl.appendChild(itemEl);

  tableEl = document.createElement("table");
  rowEl = document.createElement("tr");
  for (idx = 0; idx < hostColors.length; idx += 1) {
    if ((idx + 1) % 4 === 0) {
      tableEl.appendChild(rowEl);
      rowEl = document.createElement("tr");
    }

    itemEl = document.createElement("td");
    name = getNameForCount(idx + 1);
    icon = getIconForCount(idx + 1);
    itemEl.innerHTML = "<img src=\"" + icon + "\">&nbsp;&nbsp;" + name;
    rowEl.appendChild(itemEl);
  }

  tableEl.appendChild(rowEl);
  legendEl.appendChild(tableEl);
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(legendEl);
};

var createCenterControl = function(map) {
 ...