STC_Map_English

by skaggarwal

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_v0fjvKbblTLEZDAoa0y6F6waKB_zifk&callback=load&libraries=&v=weekly"></script>

<html>

  <head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
   
  </head>


  <body>

    <div class="container" style="display: flex; height: 600px;">
    
    <div >
      <div class="filters">
        <ul>
        <li id = "Label" class = "active">
            <b>Click below to change categories.</b>
          </li>
          <li id="Violence_filter" onclick="toggleGroup('Violence', this);" class="active">
            Domestic Violence &amp Sexual Assault</li>
          <li id="Food_filter" onclick="toggleGroup('Food', this);" class="active">
            Food</li>
          <li id="Healthcare_filter" onclick="toggleGroup('Healthcare', this);" class="active">
            Healthcare</li>
          <li id="Housing_filter" onclick="toggleGroup('Housing', this);" class="active">
            Housing</li>
          <li id="Legal_filter" onclick="toggleGroup('Legal', this);" class="active">
            Legal</li>
          <li id="LGBTQ_filter" onclick="toggleGroup('LGBTQ', this);" class="active">
            Sexual &amp Gender Minority </li>
          <li id="MH_filter" onclick="toggleGroup('MH', this);" class="active">
            Mental Health &amp Substance Misuse</li>
          <li id="Veterans_filter" onclick="toggleGroup('Veterans', this);" class="active">
            Veterans</li>
          <li id="Youth_filter" onclick="toggleGroup('Youth', this);" class="active">
            Youth &amp Adolescent</li>
        </ul>
        
      </div>
      <div id = "tree">
       
        
      </div>
    </div>
    <div id = "map">
    
    </div>



    </div>
    <!-- Domestic Violence & Sexual Assault Columns -->

    <div id="Violence" class="infoContainer" width=100%>
      <div class="header" style="background-color:#A1919E">
        <h1>...

CSS

body {
  font-family: serif;
  background-color: #f0e3d8;

}

head {
  margin: 0;
  padding: 0;

}


#map {
  height: 100%;
  width: 100%;
}

.filters {
  background-color: #F2EBDC;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  position: relative;
  top: 0px;
  left: 0px;
  border: 0px solid #999;
  border-radius: 2px;
  padding: 0;
  z-index: 999;
  width: 100%;
  height: 600px;
}

.filters ul {

  margin: 0;
  padding: 0;
  list-style: none;
}

.filters ul li {


  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 15px 10px 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  height: 40px;

}

.filters ul li#Label.active {
  background: white;
  color: black;
}

.filters ul li#Violence_filter.active {
  background: #A1919E;
  color: #fff;
}

.filters ul li#Food_filter.active {
  background: #F2C883;
  color: #fff;
}

.filters ul li#Healthcare_filter.active {
  background: #AB8F61;
  color: #fff;
}

.filters ul li#Housing_filter.active {
  background: #A6E0D9;
  color: #fff;
}

.filters ul li#Legal_filter.active {
  background: #943B87;
  color: #fff;
}

.filters ul li#LGBTQ_filter.active {
  background: #EDAFAF;
  color: #fff;
}

.filters ul li#MH_filter.active {
  background: #7A97A3;
  color: #fff;
}

.filters ul li#Veterans_filter.active {
  background: #BEDB8F;
  color: #fff;
}

.filters ul li#Youth_filter.active {
  background: #86946F;
  color: #fff;
}

.filters ul li#Violence_filter:hover,
.filters ul li#Food_filter:hover,
.filters ul li#Healthcare_filter:hover,
.filters ul li#Housing_filter:hover,
.filters ul li#Legal_filter:hover,
.filters ul li#LGBTQ_filter:hover,
.filters ul li#MH_filter:hover,
.filters ul li#Veterans_filter:hover,
.filters ul li#Youth_filter:hover,
  {
  opacity: 0.8;
}

.infoContainer {
  height: 100%;
  margin-top: 10px;

}

.Category ul {
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
  column-count: 2;
  column-width: 400px;
  column-gap:...

JavaScript

var infoWindow = new google.maps.InfoWindow();

// global infowindow variable

var STC = ['Shade Tree Clinic', 'https://www.shadetreeclinic.org/', 36.126131, -86.776901, 'Healthcare','https://www.google.com/maps/dir//Shade+Tree+Clinic,+Franklin+Pike,+Nashville,+TN/@36.1256272,-86.8113705,13z/data=!4m8!4m7!1m0!1m5!1m1!1s0x886467a34fb6f73b:0x389232d17fdffd29!2m2!1d-86.7763158!2d36.1254596']
var SAC = ['Sexual Assault Center', 'http://www.sacenter.org/', 36.18938, -86.796533, 'Violence','https://www.google.com/maps/dir//Sexual+Assault+Center,+French+Landing+Drive,+Nashville,+TN/@36.1891913,-86.8313478,13z/data=!4m8!4m7!1m0!1m5!1m1!1s0x88646710b82d20a1:0x692cf7ae3cc8a526!2m2!1d-86.796451!2d36.1890987']
var YWCA = ['YWCA Nashville and Middle Tennessee', 'https://www.ywcanashville.com/', 36.1136, -86.802742, 'Violence','https://www.google.com/maps/dir//YWCA,+Woodmont+Boulevard,+Nashville,+TN/@36.1133772,-86.8367815,13z/data=!4m8!4m7!1m0!1m5!1m1!1s0x886464155ff875cb:0x666404a3ea3fbc12!2m2!1d-86.801762!2d36.113313']
var EndSlaveryTN = ['End Slavery Tennessee', 'https://www.endslaverytn.org', 36.232588, -86.760262, 'Violence']
var Magdalene = ['Magdalene House', 'https://thistlefarms.org/pages/magdalene-residential-program', 36.15211, -86.849024, 'Violence', 'https://www.google.com/maps/dir//Thistle+Farms,+5122+Charlotte+Pike,+Nashville,+TN+37209/@36.1521468,-86.8517652,17z/data=!4m8!4m7!1m0!1m5!1m1!1s0x8864616c3ada60df:0x95501fcf31c0fd27!2m2!1d-86.849591!2d36.1523896']
var NashvilleFood = ['Nashville Food Project', 'https://www.thenashvillefoodproject.org/', 36.165007, -86.858779, 'Food','https://www.google.com/maps/dir//The+Nashville+Food+Project,+Inc.,+California+Avenue,+Nashville,+TN/@36.1651462,-86.8936645,13z/data=!4m8!4m7!1m0!1m5!1m1!1s0x88646412b7523019:0x24f8de4605579946!2m2!1d-86.858645!2d36.165082']
var SecondHarvest = ['Second Harvest Food Bank of Middle Tennessee', 'http://secondharvestmidtn.org/', 36.198725, -86.794332,...