Edit in JSFiddle

var projectKey = '12345678';
var googleClientId = 'gme-webgeoservicessa';
var markersStyle = {
    rules: [
        {
            type: 'drive',
            icon: {url: 'https://developers.woosmap.com/img/markers/marker_drive.svg'},
            selectedIcon: {url: 'https://developers.woosmap.com/img/markers/marker_drive_selected.svg'},
numberedIcon: {url: 'https://developers.woosmap.com/img/markers/marker_drive_selected.svg'}
        }
    ],
    default: {
        icon: {url: 'https://developers.woosmap.com/img/markers/marker_default.svg'},
        selectedIcon: {url: 'https://developers.woosmap.com/img/markers/marker_selected.svg'}
    }
};
var tilesStyle = {
    color: '#0288D1',
    size: 11,
    minSize: 6,
    typeRules: [{
        type: 'drive',
        color: '#FF5722'
    }]
};

function registerDraggableMarker(mapView) {
    mapView.marker.setOptions({
        draggable: true,
        icon: {url: 'https://developers.woosmap.com/img/markers/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 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 geocoder = new woosmap.location.GeocoderSearchSource();
        var searchview = new woosmap.ui.SearchView(woosmap.$('#search_template').text());
        var nearbyStoresSource = new woosmap.location.NearbyStoresSource(dataSource, 5);

        nearbyStoresSource.bindTo('location', geocoder, 'location', false);
        tableview.bindTo('stores', nearbyStoresSource);
        geocoder.bindTo('query', searchview, 'query', false);

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

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

        self.tableview = tableview;
        var defaultStores = null;
        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});
        mapView.bindTo('stores', tableview, 'stores', false);
        mapView.bindTo('selectedStore', tableview, 'selectedStore', false);
        mapView.bindTo('location', geocoder);
        mapView.delegate = {
            'didLocationMarkerDragEnd': function () {
                searchview.$searchInput.val('');
            }
        };

        registerDraggableMarker(mapView);

        searchview.delegate = {
            didClearSearch: function () {
                tableview.set('stores', defaultStores);
                mapView.set('selectedStore', null);
                mapView.set('location', {})
            }
        };

    });

}

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 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: #0288D1;
}

.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://developers.woosmap.com/img/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://developers.woosmap.com/img/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%;
    }
}