Edit in JSFiddle

var projectKey = '12345678';
var googleClientId = 'gme-webgeoservicessa';
var markersStyle = {
    rules: [
        {
            type: 'drive',
            icon: {url: 'https://images.woosmap.com/marker_drive.svg', scaledSize: {width: 36, height: 48}},
            selectedIcon: {url: 'https://images.woosmap.com/marker_drive_selected.svg', scaledSize: {width: 46, height: 60}}
        }
    ],
    default: {
        icon: {url: 'https://dimages.woosmap.com/marker_default.svg', scaledSize: {width: 36, height: 48}},
        selectedIcon: {url: 'https://images.woosmap.com/marker_selected.svg', scaledSize: {width: 46, height: 60}}
    }
};
var tilesStyle = {
  color: '#0288D1',
  size: 11,
  minSize: 6,
  typeRules: [{
    type: 'drive',
    color: '#FF5722'
  }]
};

function registerDraggableMarker(mapView) {
  mapView.marker.setOptions({
    draggable: true,
    icon: {
      url: 'https://images.woosmap.com/geolocated.png'
    }
  });
}

/*----- Init and display a Map with a TiledLayer-----*/
function woosmap_main() {
  var self = this;
  var loader = new woosmap.MapsLoader(googleClientId);
  var dataSource = new woosmap.DataSource();
  loader.load(function() {

    var map = new google.maps.Map(woosmap.$('#my-map')[0], {
      center: {
        lat: 46,
        lng: 3
      },
      zoom: 5
    });

    var mapView = new woosmap.TiledView(map, {
      style: markersStyle,
      tileStyle: tilesStyle
    });

    var searchview = new woosmap.ui.SearchView(woosmap.$('#search_template').text());

    var initialSearchTextOptions = {
      name: woosmap.search.SearchQuery.OR,
      city: woosmap.search.SearchQuery.OR
    };
    var searchQuery = new woosmap.search.SearchQuery(initialSearchTextOptions);

    var searchTextOptionsRenderer = new woosmap.TemplateRenderer(woosmap.$("#text-search-options-template").html());
    var tagsRenderer = new woosmap.TemplateRenderer(woosmap.$("#tags-selector-template").html());
    var typesRenderer = new woosmap.TemplateRenderer(woosmap.$("#types-selector-template").html());
    var attributeSearchContainer = woosmap.$('<div class="attributes-search-container">');
    attributeSearchContainer.append(searchview.getContainer());
    attributeSearchContainer.append(searchTextOptionsRenderer.render());
    attributeSearchContainer.append(tagsRenderer.render());
    attributeSearchContainer.append(typesRenderer.render());
    var sidebar = woosmap.$('.sidebar');
    sidebar.prepend(attributeSearchContainer);

    function typeChanged() {
      searchQuery.types = [];
      woosmap.$.each(woosmap.$('.woosmap-available-type:checked'), function(index, object) {
        searchQuery.addTypeFilter(woosmap.$(object).val(), woosmap.search.SearchQuery.AND);
      });
      mapView.setSearchQuery(searchQuery);
    }

    function tagChanged() {
      searchQuery.tags = [];
      woosmap.$.each(woosmap.$('.woosmap-available-tag:checked'), function(index, object) {
        searchQuery.addTagFilter(woosmap.$(object).val(), woosmap.search.SearchQuery.AND);
      });
      mapView.setSearchQuery(searchQuery);
    }

    woosmap.$('.woosmap-available-tag').click(function() {
      tagChanged();
    });

    woosmap.$('.woosmap-available-type').click(function() {
      typeChanged();
    });

    woosmap.$('.woosmap-text-search-param').click(function() {
      if (this.checked) {
        searchQuery.addQueryOption(woosmap.$(this).val(), woosmap.search.SearchQuery.OR)
      } else {
        searchQuery.removeQueryOption(woosmap.$(this).val())
      }
      mapView.setSearchQuery(searchQuery);
    });

    woosmap.$('.search_input').on("change paste keyup", function() {
      searchQuery.setQuery(woosmap.$(this).val());
      mapView.setSearchQuery(searchQuery);
    });
      
    searchview.delegate = {
      didClearSearch: function() {
        searchQuery.setQuery('');
        mapView.setSearchQuery(searchQuery);
      }
    };
  });

}

document.addEventListener("DOMContentLoaded", function(event) {
  WoosmapLoader.load('1.3', projectKey, woosmap_main);
});

<script src="https://sdk.woosmap.com/locator/loader.js"></script>
<script id="search_template" type="text/mustache">
  <div>
    <input class="search_input" placeholder="Search in checked fields" />
    <span class="search_clear"></span>
  </div>


</script>

<script id="types-selector-template" type="text/mustache">
  <div class="attribute-filter-container">
    <div class="attribute-filter-title">Filter by store type</div>
    <div class="attribute-filter-body">
      <div>
        <input type="checkbox" value="AuchanEM" class="woosmap-available-type checkbox-input-attribute">AuchanEM</div>
      <div>
        <input type="checkbox" value="drive" class="woosmap-available-type checkbox-input-attribute">Drive</div>
      <div>
        <input type="checkbox" value="AuchanFR" class="woosmap-available-type checkbox-input-attribute">AuchanFR</div>
    </div>
    <div>


</script>
<script id="tags-selector-template" type="text/mustache">
  <div class="attribute-filter-container">
    <div class="attribute-filter-title">Filter by store tag</div>
    <div class="attribute-filter-body">
      <div>
        <input type="checkbox" value="pharmacy" class="woosmap-available-tag checkbox-input-attribute">Pharmacy</div>
      <div>
        <input type="checkbox" value="filling station" class="woosmap-available-tag checkbox-input-attribute">Filling station</div>
    </div>
    <div>


</script>
<script id="text-search-options-template" type="text/mustache">
  <div class="attribute-filter-container">
    <div>
      <input type="checkbox" value="name" class="woosmap-text-search-param checkbox-input-attribute" checked>Name</div>
    <div>
      <input type="checkbox" value="city" class="woosmap-text-search-param checkbox-input-attribute" checked>City</div>
    <div>
      <input type="checkbox" value="idstore" class="woosmap-text-search-param checkbox-input-attribute">IDStore</div>
  </div>
</script>

<div class="locator-container pure-g">
  <div class="sidebar pure-u-1 u-sm-1-3">
    <div id="listings" class="search-attributes-listings"></div>
  </div>
  <div id="my-map" class="map pure-u-1 u-sm-2-3"></div>
</div>
#my-map {
  height: 600px;
}

.locator-container {
  font-size: 15px;
  line-height: 1.5em;
  color: #555;
  background: #FFF;
}

.sidebar {
  height: 600px;
  overflow: hidden;
  border: 1px solid #EEE;
  border-right: none;
}

.listings {
  padding-bottom: 36px;
  background-color: #FFF;
  color: #555;
}

.woosmap-tableview-container,
.card_container {
  max-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.item {
  display: block;
  border-bottom: 1px solid #eee;
  padding: 10px;
  text-decoration: none;
  cursor: pointer;
}

.item .title {
  display: block;
  color: #4d9da9;
  font-weight: 500;
}

.item .title small {
  font-weight: 300;
}

.quiet {
  color: #888;
}

small {
  font-size: 80%;
}

.selected_card .item .title,
.item .title:hover {
  color: #03A9F4;
}

.item.active {
  background-color: #f8f8f8;
}

.selected_card {
  background-color: #f8f8f8;
}

.selected_card:hover {
  background-color: #f8f8f8;
}

.search_container {
  margin: 5px;
  border: 1px solid #1badee;
  border-radius: 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  padding: 0 7px;
  width: 96%;
  vertical-align: top;
  position: relative;
}

.search_input {
  border: none;
  padding: 0;
  height: 1.25em;
  width: 100%;
  z-index: 6;
  outline: none;
  background: #FFF;
  margin-top: 7px;
  float: left;
  font-size: 1em;
  color: #555;
}

.search_clear {
  float: right;
  background: white url('https://images.woosmap.com/close.png') no-repeat left top;
  position: absolute;
  right: 5px;
  top: 8px;
  padding: 7px;
  font-size: 14px;
  cursor: pointer;
  display: none;
}

.search_clear:hover {
  background: white url('https://images.woosmap.com/close-hover.png') no-repeat left top;
}

.woosmap-tableview-highlighted-cell {
  background-color: #f8f8f8;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #d1d1d1;
}

::-webkit-scrollbar-track {
  background-color: #F7F7F7;
}


/* attribute search page */

.attributes-search-container {
  border-bottom: solid 1px #eee;
}

.attribute-filter-container {
  margin: 5px;
  border: 1px solid rgba(27, 173, 238, 0.29);
}

.attribute-filter-container:hover {
  margin: 5px;
  border: 1px solid #1badee;
}

.attribute-filter-title {
  cursor: pointer;
  text-align: center;
}

.attribute-filter-title.active {
  border-bottom: solid 1px #eee;
}

.attribute-filter-body {
  margin-left: 5px;
}

.checkbox-input-attribute {
  margin-right: 5px;
}

.search-attributes-listings {
  height: 320px;
  padding-bottom: 36px;
}

.woosmap-tableview-highlighted-cell .title {
  color: #1badee;
}

.woosmap-tableview-selected-cell {
  color: #1badee;
  background-color: rgba(235, 235, 235, 0.29);
}


/*grids*/

.pure-g {
  letter-spacing: -.31em;
  text-rendering: optimizespeed;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  display: -ms-flexbox;
  -ms-flex-flow: row wrap;
  -ms-align-content: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

.pure-g [class *="pure-u"] {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;
  font-weight: normal;
  letter-spacing: 0.01em;
}

.pure-u-1,
.u-sm-1-3,
.u-sm-2-3 {
  display: inline-block;
  zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
}

.pure-u-1 {
  width: 100%;
}

@media screen and (min-width: 35.5em) {
  .u-sm-1-3 {
    width: 33.3333%;
  }
  .u-sm-2-3 {
    width: 66.5%;
  }
}