CapMetro Transit Outlets Locations_V02

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="map-canvas-container container-fluid" id="map">

  <!-- Menu Options for Map -->
  <div class="row">

    <div class="filters col-xs-5 col-sm-5 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>
    <!-- Stores listin on Map -->

    <div class="map-canvas col-xs-7 col-sm-7 col-med-9">
      <!-- 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"...

CSS

/* all map containers must be full height */

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

#map {
  background: #000000;
  height: 600px;
}

#map-canvas {
  width: 100%;
  height: 100%;
  height: calc(100% - 0px);
}

.filters {
  width: 175px;
  background: rgba(0, 0, 0, 0.75);
  position: relative;
  border: 4px solid rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  padding: 0;
  color: WHITE;
}