directory.html

<!DOCTYPE html>
<html lang='en'>
<head>
<title>Intermodal Directory</title>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='' name='description' />
<meta content='' name='author' />
<!-- Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/test.css"/>

<!-- <link rel="stylesheet" href="css/bootstrap.css"/> -->
<!--<link rel="stylesheet" href="css/customdir1.css"/> -->
<link rel="stylesheet"
        href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<!--This version for tablets and smartphones-->
<div class="container-fluid">
  <div class='row-fluid'>
    <div class='span7'>
      <noscript>
      <div class='alert alert-info'>
        <h4>Your JavaScript is disabled</h4>
        <p>Please enable JavaScript to view the map.</p>
      </div>
      </noscript>
      <div id='map_canvas'></div>
      <div id='legend'> <img src="images/small_yellow.png" alt="Yellow"> CY/Depot <img src="images/small_red.png" alt="Red"> Rail <img src="images/small_blue.png" alt="Blue"> Marine </div>
    </div>
    <div id ='results_list' class='span5'></div>
  </div>
  <div class='controls controls-row' id='searchbar' >
    <div class="input-append input-prepend span5"> <span class='add-on'>Search By:</span>
      <select class="input-default" id="SearchType" onChange="MapsLib.SearchTypeChange(value)">
        <option value='0'>--Search Type--</option>
        <option value="1">State / Province</option>
        <option value="2">City</option>
        <option value="3">Facility Type</option>
        <option value="4">Facility Name</option>
        <option value="5">Address</option>
        <option value="6">Railroad</option>
      </select>
      <a class='btn btn-default btn-danger' id='reset' href='#'> <i class='glyphicon glyphicon-repeat'></i> Reset </a> </div>
    <select id="stateDD" class="dropdown span3" style="display: none;">
      <option value="">-- Select a State / Province --</option>
      <option value="">Loading States...</option>
    </select>
    <select id="cityDD" class="dropdown span3" style="display: none;">
      <option value="">-- Select a City --</option>
      <option value="">Loading Cities...</option>
    </select>
    <select id="facilitytypeDD" class="dropdown span3" style="display: none;">
      <option value="">-- Select a Facility Type --</option>
      <option value="">Loading Facility Types...</option>
    </select>
    <select id="railroadDD" class="dropdown span3" style="display: none;">
      <option value="">-- Select a Railroad --</option>
      <option value="">Loading Roalroads...</option>
    </select>
    <div id='input-name' class="input-append span3" style="display:none;">
      <p> Facility Name:
        <input class='form-control input-normal' id='search_name' placeholder='Enter a Facility Name' type='text'/>
        <a class='btn btn-primary' id='search' href='#'> <i class='glyphicon glyphicon-search'></i> Search </a> </p>
    </div>
    <div id='input-address' class="input-append span3" style="display:none;">
      <p> Address <small>(<a id='find_me' href='#'>find me</a>)</small>
        <input class='form-control input-large' id='search_address' placeholder='Enter an address or an intersection' type='text' value=''/>
        within
        <select class='input-small' id='search_radius'>
          <option value='3220'>2 miles</option>
          <option value='8050'>5 miles</option>
          <option value='16100'>10 mile</option>
          <option value='40250'>25 miles</option>
          <option value='80500'>50 miles</option>
          <option value='161000'>100 miles</option>
        </select>
        <a class='btn btn-primary' id='search2' href='#'> <i class='glyphicon glyphicon-search'></i> Search </a> </p>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/jquery.address.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- Update Google Maps API key after "key=" in following url -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&key=AIzaSyDJVYGPiOaeWADSHeJZZ1Nb8gx2m6ld6zo"></script> 
<!---->
<script type="text/javascript" src="js/jquery.geocomplete.min.js"></script> 
<script type="text/javascript" src="js/maps_lib.js"></script> 
<script type="text/javascript" src="js/placeholders.jquery.js"></script> 
<script type='text/javascript'>
      //<![CDATA[

        $(window).resize(function () {
          var searchHeight = $('#searchbar').height();
          var h = $(window).height(),
          offsetTop = searchHeight + 25; // Calculate the top offset
          var newHeight = h - offsetTop
          console.log('[window.resize] h - offsetTop = ' + newHeight)
          $('#map_canvas').css('height', (h - offsetTop));
          $('#results_list').css('height', (h - offsetTop));
          $('#legend').css('bottom', ( offsetTop + 45));

        }).resize();
        
        $(function() {
          MapsLib.initialize();

          $("#search_address").geocomplete();
		
          $(':checkbox').click(function(){
            MapsLib.doSearch();
          });

          $(':radio').click(function(){
            MapsLib.doSearch();
          });
          
          $('#search_radius').change(function(){
            MapsLib.doSearch();
          });

          $('.dropdown').change(function(){
            MapsLib.doSearch();
          });
          
          //Adjust map and table height to correspond with searchbar height change
          $('#SearchType').change(function(){
            var searchHeight = $('#searchbar').height();
            var h = $(window).height(),
            offsetTop = searchHeight + 25; // Calculate the top offset
            var newHeight = h - offsetTop
            console.log('[window.resize] h - offsetTop = ' + newHeight)
            $('#map_canvas').css('height', (h - offsetTop));
            $('#results_list').css('height', (h - offsetTop));
            $('#legend').css('bottom', ( offsetTop + 45));

          });
          
          $('#search').click(function(){
            MapsLib.doSearch();
          });

          $('#search2').click(function(){
            MapsLib.doSearch();
          });
          
          $('#find_me').click(function(){
            MapsLib.findMe(); 
            return false;
          });
          
          $('#reset').click(function(){
            $.address.parameter('address','');
            MapsLib.initialize(); 
            var searchHeight = $('#searchbar').height();
            var h = $(window).height(),
            offsetTop = searchHeight + 25; // Calculate the top offset
            var newHeight = h - offsetTop
            console.log('[window.resize] h - offsetTop = ' + newHeight)
            $('#map_canvas').css('height', (h - offsetTop));
            $('#results_list').css('height', (h - offsetTop));
            $('#legend').css('bottom', ( offsetTop + 45));
            return false;
          });
          
          $(":text").keydown(function(e){
              var key =  e.keyCode ? e.keyCode : e.which;
              if(key == 13) {
                  $('#search').click();
                  return false;
              }
          });
        });
		
		
      //]]>
    </script>
</body>
<!--Last page revision: 07 Jun 2018 - JK --->
</html>