CapMetro Transit Outlets Locations_V01

by freedawirl

HTML

<script src="//maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//www.capmetro.org/js/infobox.js"></script>
<script src="//www.capmetro.org/js/faresMap.js"></script>
<link rel="stylesheet" href="//www.capmetro.org/css/fares/fares-map.css">
<div class="container">

<!-- Menu Options for Map -->
  <div class="filters col-md-3">
    <p class="title">Retail Outlets</p>
    <ul>
      <li>
        <a href="#"> <span class="glyphicon glyphicon-circle-arrow-right"></span>Show all outlets</a>
      </li>
      <li> <a href="#" data-filterby="type" data-filtervalue="hasAccess"><span class="glyphicon glyphicon-circle-arrow-right"></span>Has MetroAccess</a>

      </li>
    </ul>
    <ul>
      <li> <a href="#" data-filterby="store" data-filtervalue="heb"><span class="glyphicon glyphicon-circle-arrow-right"></span>HEB</a>

      </li>
      <li> <a href="#" data-filterby="store" data-filtervalue="randalls"><span class="glyphicon glyphicon-circle-arrow-right"></span>Randalls</a>

      </li>
      <li> <a href="#" data-filterby="store" data-filtervalue="other"><span class="glyphicon glyphicon-circle-arrow-right"></span>Other</a>

      </li>

    </ul>
    <div class="clear"></div>
  </div>
  <!-- Stores listin on Map -->
  <div class="map-canvas-container" id="map">
    <div class="map-canvas">
      <!-- Heb Locations -->
      <div class="marker" data-type="noAccess" data-store="heb" data-lat="30.25921" data-lng="-97.71153">
        <div class="marker-info ">
          <h4>HEB</h4>Store #1
          <br/>2701 E 7th St
          <br/>(512) 478-7328
          <br/>
          <a href="https://www.google.com/maps/place/2701+E+7th+St,+Govalle+Shopping+Center,+Austin,+TX+78702/@30.2592128,-97.7115268,17z/data=!3m1!4b1!4m2!3m1!1s0x8644b5cdcc08f067:0x6c09e3f293c375f0" title="CapMetro Retail Outlet" target="_blank">Go to location</a>
        </div>

      </div>
     ...

CSS

/* all map containers must be full height */

html,
body,
.container-fluid,
.row,
.map {
  height: 100%
}

#map-canvas {
  width: 100%;
  height: 100%;
  height: calc(100% - 0px);
}
.filters {
    width: 175px;
    background: rgba(0,0,0,0.75);
    /* position: absolute; */
    top: 0px;
    left: 0px;
    border: 4px solid rgba(0,0,0,0.8);
    border-radius: 6px;
    padding: 0;
    color: WHITE;
}