Map_v4

by skaggarwal

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAhvSfMfpxaTpYuz6Fc6O5v6mxjgoVBOBQ&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>
  <div>
  <h1>
  Map of Nashville Resources
  </h1>
  </div>

  <body>

    <div class="container" style="display: flex; height: 500px;">
      <div class="filters">
        <ul>
          <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="map" ></div>

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

    <div id="Violence" class="infoContainer" width=100%>
      <div class="header" style="background-color:#c0c0c0">
        <h1> Domestic Violence &amp Sexual Assault Resources </h1>
      </div>
      <div class="cards" width=100%>
        <div id="Violence_c1" class="Category">
   ...

CSS

body {
  font-family: arial;
}

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

.filters {
  background-color: rgba(255, 255, 255, 0.9);
  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;
}

.filters ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.filters ul li {
  display: block;
  padding: 10px 15px 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #e4e4e4;
  border-bottom-color: rgba(228, 228, 228, 0.8);
  font-size: 14px;
  color: #666;
}

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

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

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

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

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

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

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

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

.filters ul li#Youth_filter.active {
  background: #5959ff;
  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;
}

.infoContainers {
  height: 100%;
}

.Category ul {
  list-style-type: none;
  margin-left: 0px;
  padding: 0px;
  column-count: 2;
}

.Category ul li {
  border: 1px solid black;
  margin: 0 0 20px 0;
  border-radius: 10px;
  height: 230px;
  width: 100%;

  /* Rounds the corners */
  padding: 10px 0px 0px 5px;
  vertical-align: top;

}

.cards {
  display: flex;
...

JavaScript

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

// global infowindow variable

var STC = ['Shade Tree Clinic', 'https://www.shadetreeclinic.org/', 36.126131, -86.776901, 'Healthcare']
var SAC = ['Sexual Assault Center', 'http://www.sacenter.org/', 36.18938, -86.796533, 'Violence']
var YWCA = ['YWCA Nashville and Middle Tennessee', 'https://www.ywcanashville.com/', 36.1136, -86.802742, 'Violence']
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']
var NashvilleFood = ['Nashville Food Project', 'https://www.thenashvillefoodproject.org/', 36.165007, -86.858779, 'Food']
var SecondHarvest = ['Second Harvest Food Bank of Middle Tennessee', 'http://secondharvestmidtn.org/', 36.198725, -86.794332, 'Food']
var LittlePantry = ['The Little Pantry that Could', 'http://www.thelittlepantrythatcould.org/', 36.183625, -86.816135, 'Food']
var CCM = ['Christian Cooperative Ministry', 'helpmadison.org', 36.258397, -86.715052, 'Food']
var SA_Magness = ['The Salvation Army Magness Potter Community Center', 'https://www.salvationarmynashville.org/magness-potter-community-center', 36.181454, -86.77026, 'Food']
var Hamilton = ['Hamilton United Methodist Church', 'https://hmumc.org/thepantry', 36.064823, -86.62798, 'Food']
var SA_NaSouth = ['Salvation Army Nashville South', 'www.salvationarmynashville.org', 36.085694, -86.726265, 'Food']
var StPhilips = ["St Philip's Episcopal Church", 'https://tn211.myresourcedirectory.com/index.php/component/cpx/?task=resource.view&id=2909961&search_history_id=8983013', 36.174016, -86.681687, 'Food']
var MOB = ["Martha O'Bryan Center", 'http://www.marthaobryan.org/', 36.167482, -86.755824, 'Food']
var EastBNA = ['East Nashville Co-Op', 'https://tn211.myresourcedirectory.com/index.php/component/cpx/?task=resource.view&id=2909625&search_history_id=738601',...