map.html

<div class='prettyMapList above cf' id='MapListPro0'>
  <!--The Map -->
  <div id='map-canvas0' class='mapHolder'>
  </div>
  <!-- hidden div that gets bound -->
  <div data-bind="map: $data.filteredLocations()">
  </div>
  <!-- Search, Filters, Sorting bar -->
  <div class='prettyFileBar clearfix'>
    <!-- Sorting button -->
    <form id='Map-List-Search' data-bind='submit:mapSearchSubmit' class='prettyMapListSearch false'>
      <label class='hidden'>
        Find locations near
      </label>
      <input type='text' class='prettySearchValue' autocomplete='off' placeholder="Search…" value=''>
      <select class='distanceSelector' name='distanceSelector' id='distanceSelector' data-bind='options: distanceFilters, optionsText:function(item){return item.label}, optionsValue: function(item){return item.value}, value: chosenFromDistance'>
      </select>
      <a class='doPrettySearch btn corePrettyStyle' data-bind='click:locationSearch'>
        Go
      </a>
      <a class='clearSearch btn corePrettyStyle' data-bind='visible: anySearchTermsEntered, click: clearSearch'>
        Clear
      </a>
    </form>
  </div>
  <!--Message bar-->
  <div class='prettyMessage' data-bind='visible: anyLocationsAvailable' style='display:none;'>
    <span>
      No matching locations 
    </span>
    <a class='btn' href='#' data-bind='click:clearSearch'>
      Show all locations
    </a>
  </div>
  <div class='prettyMessage' data-bind='visible: geocodeFail' style='display:none;'>
    <span>
      No location found 
    </span>
    <a class='btn' href='#' data-bind='click:clearSearch'>
      Show all locations
    </a>
  </div>
  <div id='ListContainer'>
    <!--The List -->
    <ul class='unstyled prettyListItems loading' data-bind='visible: anySearchTermsEntered,foreach: {data: pagedLocations}'>
      <li class='corePrettyStyle prettylink map location' data-bind='css: $data.cssClass,click: $root.locationClick'>
        <a href='#' class='viewLocationDetail clearfix'>
          <!-- ko if: $data.smallImageUrl -->
          <img src='#' data-bind='attr:{src: $data.smallImageUrl}' class='smallImage' />
          <!-- /ko -->
          <span data-bind='html:$data.title'>
          </span>
          <span data-bind='text:$data.friendlyDistance'>
          </span>
        </a>
        <!--Expanded item-->
        <div class='mapLocationDetail clearfix' style='display:none;' data-bind='slideIn: $data.expanded,slideOut: $data.expanded'>
          <div class='mapDescription clearfix'>
            <!-- ko if: $data.imageUrl -->
            <img src='#' data-bind='attr:{src: $data.imageUrl}' class='featuredImage float_left' />
            <!-- /ko -->
            <div class='description float_left'>
              <div data-bind='{html:$data.description}'>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class='prettyPagination' data-bind='visible: anySearchTermsEntered'>
    <a class='pfl_next btn corePrettyStyle' href='#' data-bind='click: nextPage,css:nextPageButtonCSS'>
      Next &raquo;
    </a>
    <div data-bind="visible: pagingVisible" class="pagingInfo">
      Page 
      <span class='currentPage' data-bind='text: currentPageNumber'>
      </span>
      of 
      <span data-bind='text: totalPages' class='totalPages'>
      </span>
    </div>
    <a class='pfl_prev btn corePrettyStyle' data-bind='click: prevPage,css:prevPageButtonCSS' href='#'>
      &laquo; Prev
    </a>
  </div>
</div>