CapMetro Transit Outlets Locations_V03

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>
<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 col-lg-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 col-lg-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" target="_blank">Go to location</a>
      </div>

    </div>
    <div class="marker"...

CSS

/* all map containers must be full height */

html,
body,
.container-fluid,
.row,
.map {
  height: 100%
}
#map{
  background:#000000;
}
#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;
}
#map-canvas {
	width:100%;
    height: 100%;
 	height:calc(100% - 0px);
}

JavaScript

var siteURL = '';
if (document.domain == 'localhost') siteURL = "";

$(document).ready(function () {

    function render_map($el) {

        // Var
        var $markers = $el.find('.marker');

        // Vars
        var cmtaStores = {
            center: new google.maps.LatLng(30.3343897, -97.7431207),
            backgroundColor: '#ffffff',
            zoom: 12,
            disableDefaultUI: true,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },

            disableDoubleClickZoom: true,
            panControl: false,
            mapTypeControl: false,
            scaleControl: true,
            scrollwheel: false,
            streetViewControl: false,
            draggable: true,
            overviewMapControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,

        };

        // Create map           
        var map = new google.maps.Map($el[0], cmtaStores);

        // Add a markers reference
        map.markers = [];

        // Add markers
        $markers.each(function () {
            add_marker($(this), map);
        });

        // Center map
        center_map(map);

        return map;

    }

    function add_marker($marker, map) {

        // Var
        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
        var icon = null;

        // Simple icon change to differentiate marker type
        if ($marker.data('type') == 'hasAccess') {
            icon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
        } else {
            icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
        }

        var marker = new google.maps.Marker({
            icon: icon,
            position: latlng,
            map: map,
            // Custom property to hold the filters options, it'a used below to filter the markers
            filter: {
                type: $marker.data('type'),
     ...