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: 46/2, height: 58/2}},
            selectedIcon: {url: 'https://images.woosmap.com/marker_drive_selected.svg'}
        }
    ],
    default: {
        icon: {url: 'https://images.woosmap.com/marker_default.svg', scaledSize: {width: 46/2, height: 58/2}},
        selectedIcon: {url: 'https://images.woosmap.com/marker_selected.svg'}
    }
};
var tilesStyle = {
    color: '#0288D1',
    size: 11,
    minSize: 6,
    typeRules: [{
        type: 'drive',
        color: '#FF5722'
    }]
};


/*----- 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: '<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>'
        });

        var listings = woosmap.$('#listings');
        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});
        mapView.bindTo('stores', tableview, 'stores', false);
        mapView.bindTo('selectedStore', tableview, 'selectedStore', false);

        dataSource.getAllStores(function (stores) {
            tableview.set('stores', stores.features);
        });
    });

}

document.addEventListener("DOMContentLoaded", function (event) {
    WoosmapLoader.load('1.3', projectKey, woosmap_main);
});
<script src="https://sdk.woosmap.com/locator/loader.js"></script>
<div class="locator-container pure-g">
    <div class="sidebar pure-u-1 u-sm-1-3">
        <div class="locator-heading" style>
            <h2>Store locations</h2>
        </div>
        <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;
}

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

.locator-heading {
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
}

.locator-heading h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 400;
    color: #333;
}

.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;
}

::-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%;
    }
}