Map_Directions

by skaggarwal

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Displaying Text Directions With setPanel()</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="floating-panel">
      <strong>Start:</strong>
      <select id="start">
        <option value="STC">Shade Tree Clinic</option>
        
      </select>
      <br />
      <strong>End:</strong>
      <select id="end">
        <option value="SAC">Sexual Assault Center</option>
        <option value="YWCA">YWCA Nashville and Middle Tennessee</option>
        <option value="VA">Nasvhille VA Medical Center</option>
        <option value="Centerstone">Centerstone</option>
      </select>
    </div>
    
    <div id="floating-panel-transit">
      <b>Mode of Travel: </b>
      <select id="mode">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>
    </div>
    
    <div id="container">
      <div id="map"></div>
      <div id="sidebar"></div>
    </div>
    <div style="display: none">
      <div id="floating-panel">
        <strong>Start:</strong>
        <select id="start">
        <option value="STC">Shade Tree Clinic</option>     
        </select>
        <br />
        <strong>End:</strong>
        <select id="end">
        <option value="SAC">Sexual Assault Center</option>
        <option value="YWCA">YWCA Nashville and Middle Tennessee</option>
        <option value="VA">Nasvhille VA Medical Center</option>
        <option value="Centerstone">Centerstone</option>
        </select>
      </div>
    </div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
     ...

CSS

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  height: 100%;
  display: flex;
}

#sidebar {
  flex-basis: 15rem;
  flex-grow: 1;
  padding: 1rem;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

#map {
  flex-basis: 0;
  flex-grow: 4;
  height: 100%;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: left;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#floating-panel-transit {
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#map {
  flex: auto;
}

#sidebar {
  flex: 0 1 auto;
  padding: 0;
}
#sidebar > div {
  padding: 0.5rem;
}

JavaScript

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', 36.205863, -86.737479, 'Food']
var Inspiritus = ['Inspiritus',...