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://images.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, ['places']);
  var dataSource = new woosmap.DataSource();
  loader.load(function() {

    var searchBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-5, 42),
      new google.maps.LatLng(9, 52)
    );
    var googlePlaceAutocompleteOptions = {
      bounds: searchBounds,
      types: ['geocode'],
      componentRestrictions: {
        country: 'fr'
      }
    };
    var tableview = new woosmap.ui.TableView({
      cell_store: '<div id="item" class="item"><a class="title">' +
        '{{name}}<br><small class="quiet">{{address.city}}</small></a>' +
        '<div>{{address.lines}} {{address.city}} {{address.zip}}</div></div>',
      cell_place: '<div id="item" class="item"><a class="title">{{description}}</a></div>'
    });
    var searchview = new woosmap.ui.SearchView(woosmap.$('#search_template').text());

    var nearbyStoresSource = new woosmap.location.NearbyStoresSource(dataSource, 5);
    var placesSearchSource = new woosmap.location.PlacesSearchSource(googlePlaceAutocompleteOptions);

    tableview.bindTo('stores', nearbyStoresSource);
    tableview.bindTo('predictions', placesSearchSource);
    placesSearchSource.bindTo('autocomplete_query', searchview, false);

    var predictionsPlacesObj = new woosmap.utils.MVCObject();
    predictionsPlacesObj.predictions_changed = function() {
      console.log(this.get('predictions'));
    }
    predictionsPlacesObj.bindTo('predictions', placesSearchSource);
    
    var detailsTableviewObj = new woosmap.utils.MVCObject();
    detailsTableviewObj.details_changed = function() {
      console.log(this.get('details'));
    }
    detailsTableviewObj.bindTo('details', tableview);


    var listings = woosmap.$('#listings');
    var sidebar = woosmap.$('.sidebar');

    sidebar.prepend(searchview.getContainer());
    listings.append(tableview.getContainer());

    self.tableview = tableview;

    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
    });
    tableview.bindTo('location', mapView);
    nearbyStoresSource.bindTo('location', mapView);
    mapView.bindTo('stores', tableview, 'stores', false);
    mapView.bindTo('selectedStore', tableview, 'selectedStore', false);

    mapView.marker.setOptions({
      draggable: true
    });
    searchview.delegate = {
      didClearSearch: function() {
        tableview.set('stores', []);
        tableview.set('predictions', []);
        mapView.set('selectedStore', null);
        mapView.set('location', {})
      }
    };

    registerDraggableMarker(mapView);
  });

}

document.addEventListener("DOMContentLoaded", function(event) {
  WoosmapLoader.load('1.4', 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 an Address..." />
    <span class="search_clear"></span>
  </div>
</script>
<div class="locator-container pure-g">
  <div class="sidebar pure-u-1 u-sm-1-3">
    <div id="listings" class="listings"></div>
  </div>
  <div id="my-map" class="map pure-u-1 u-sm-2-3"></div>
</div>
#my-map {
  height: 500px;
}

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

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

.listings {
  height: 460px;
  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: #03A9F4;
  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 #03A9F4;
  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;
}

/*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%;
  }
}