JSFiddle - React, Tailwind, and code Playground

by Ayadi Baha Eddine

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div>
  <div id="map-nav" style="height: 100%; max-width: 100%; background-color: grey; float: left; display: inline-block; position: relative; text-align: left; overflow-y: auto; overflow-x: hidden">
    <span style="color: white">Search Estates:</span> 
    <!-- <input type="text" id="searchField" style="max-width: 150px"><input type="button" onclick="reFresh()" value="Go" id="searchIt" style="max-width: 50px; min-width: 46px"> -->
    <br />
    <!-- /* styled collapsible UL list*/ -->
    <UL id="tree">
      <LI style="list-style-type: none"><span><input type="button" value="Campus Buildings" onclick="uniBuildingsClick()" style="width: 100%"> <!-- zoom in to uni zone--></span>
        <UL class="prt">
          <LI><a id="cb1" class="uniB" onclick="displayLI(this.id)"><span>Venn</span></a>
          </LI><!--need the a tags, check error on chrome //something about null-->
          <LI><a id="cb2" class="uniB" onclick="displayLI(this.id)"><span>Business School</span></a>
          </LI>
          <LI><a id="cb3" class="uniB" onclick="displayLI(this.id)"><span>Staff House</span></a>
          </LI>
          <LI><a id="cb4" class="uniB" onclick="displayLI(this.id)"><span>RBB</span></a>
          </LI>
          <LI><a id="cb5" class="uniB" onclick="displayLI(this.id)"><span>Applied Science</span></a>
          </LI>
          <LI><a id="cb6" class="uniB" onclick="displayLI(this.id)"><span>Fenner</span></a>
          </LI>
          <LI><a id="cb7" class="uniB" onclick="displayLI(this.id)"><span>Ferens</span></a>
          </LI>
          <LI><a id="cb8" class="uniB" onclick="displayLI(this.id)"><span>Loten</span></a>
          </LI>
          <LI><a id="cb9" class="uniB" onclick="displayLI(this.id)"><span>Brynmor Jones Library</span></a>
          </LI>
          <LI><a id="cb10" class="uniB" onclick="displayLI(this.id)"><span>Student Union</span></a>
          </LI>
          <LI><a id="cb11"...

CSS

.prt li{
  cursor: pointer;
}

JavaScript

// accordion map-nav    
var allSpan = document.getElementsByTagName('SPAN');
for (var i = 0; i < allSpan.length; i++) {
  allSpan[i].onclick = function() {
    if (this.parentNode) {
      var childList = this.parentNode.getElementsByTagName('UL');
      for (var j = 0; j < childList.length; j++) {
        var currentState = childList[j].style.display; // display                   
        if (currentState == "none") { //none
          childList[j].style.display = "block"; //block
        } else {
          childList[j].style.display = "none"; //none
        }
      }
    }
  }
}
//end accordion
//google API code
// arrays of locations
// general first set of loations
var locations = [
  ['Thwaite Hall', 53.779734, -0.400104, ],
  ['University Of Hull', 53.771455, -0.367387, ],
  ['The Lawns', 53.786513, -0.426347, ]
];
var cott = [
  ['The Lawns', 53.786513, -0.426347, ca1],
  ['Needler Hall', 53.784283, -0.415365, ca2],
  ['Thwaite Hall', 53.779734, -0.400104, ca3]
];

// Uni buildings e.g
var uniBuildings = [
  ['Venn', 53.769942, -0.368782, cb1],
  ['Hull University Business School', 53.770244, -0.370305, cb2],
  ['Staff House', 53.772009, -0.368257, cb3],
  ['RBB', 53.771496, -0.368842, cb4],
  ['Applied Science', 53.772372, -0.368942, cb5],
  ['Fenner', 53.771933, -0.369582, cb6],
  ['Ferens', 53.770680, -0.367264, cb7],
  ['Loten', 53.772275, -0.367345, cb8],
  ['Brynmor Jones Library', 53.771184, -0.369326, cb9],
  ['Student Union', 53.771872, -0.366331, cb10],
  ['Cohen', 53.769764, -0.366899, cb11],
  ['Wilberforce', 53.770685, -0.366115, cb12],
  ['Larkin', 53.770297, -0.368163, cb13]
];

//listed uni buildings
var listed = [
  ['Venn', 53.769942, -0.368782, lb1],
  ['Swale House', 53.769462, -0.371181, lb2],
  ['Rye House', 53.769350, -0.369564, lb3],
  ['Nidd, Esk, Wharfe Building', 53.769842, -0.371436, lb4],
  ['Cohen', 53.769768, -0.367227, lb5]
];
var massiveArray;

var map = new google.maps.Map(document.getElementById('map-canvas'), {
  zoom:...