Map_Spanish

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 -->
    <div id="header">
      <h1>
Recursos de Nashville
      </h1>

    </div>
  </head>


  <body>

    <div class="container" style="display: flex; height: 500px;">
    
    <div >
      <div class="filters">
        <ul>
          <li id = "Label" class = "active">
            <b>Haga clic a continuación para cambiar las categorías.</b>
          </li>
          <li id="Violence_filter" onclick="toggleGroup('Violence', this);" class="active">
            La Violencia Doméstica &amp La Agresión Sexual</li>
          <li id="Food_filter" onclick="toggleGroup('Food', this);" class="active">
            La Comida</li>
          <li id="Healthcare_filter" onclick="toggleGroup('Healthcare', this);" class="active">
El Cuidado de la Salud</li>
          <li id="Housing_filter" onclick="toggleGroup('Housing', this);" class="active">
            Las Viviendas</li>
          <li id="Legal_filter" onclick="toggleGroup('Legal', this);" class="active">
            La Ley y Legal</li>
          <li id="LGBTQ_filter" onclick="toggleGroup('LGBTQ', this);" class="active">
Minorías Sexuales y de Género</li>
          <li id="MH_filter" onclick="toggleGroup('MH', this);" class="active">
            Salud Mental y Uso de Sustancias</li>
          <li id="Veterans_filter" onclick="toggleGroup('Veterans', this);" class="active">
            Veteranx</li>
          <li id="Youth_filter" onclick="toggleGroup('Youth', this);" class="active">
Jóvenes y Adolescentes</li>
        </ul>
        
      </div>
      <div id = "tree">
       
        
      </div>
    </div>
    <div id = "map">
    
    </div>



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

    <div id="Violence"...

CSS

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

}

head {
  margin: 0;
  padding: 0;
  
}


#header {
  text-align: left;
  height: 40px;
  line-height: 0px;
  font-size: 30px;

}

#tree {
     
   height: 115px;
   width: 100%;
   background-repeat: no-repeat;
}

#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%;
}

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

.filters ul li {
  display: block;
  padding: 10px 15px 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.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;
 ...

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,...