Search store with location

Ask for html5 location and search nearbies stores

by Alex Azuero

HTML

<div style="height:800px;" id="my-map"></div>
<script src="https://stage-sdk.woosmap.com/locator/loader.js"></script>
<script id="search_template" type="text/mustache">
    <div id="search-view">
        <input class="search_input"/>
        <span class="search_clear">✕</span>
        <button class="search_button">Search</button>
        <span class="woosmap-my-location-button"><img src="http://megaicons.net/static/img/icons_sizes/8/178/512/maps-and-geolocation-define-location-icon.png" class="mire-geolocation"></span> 
    </div>
</script>

CSS

.cell {
            background-color: white;
            padding: 10px;
            margin: 5px;
            font-size: 13px;
            border-radius: 2px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }

        .cell_active {
            background-color: rgb(0, 184, 241);
        }

        .search_container {
            margin: 5px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 4px 15px -5px rgba(0, 0, 0, 0.0);

            background-color: #fff;
            border: 1px solid transparent;
            border-right: 0;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            padding: 0 7px;
            width: 300px;
            vertical-align: top;
            position: relative;
        }

        .search_input {
            border: none;
            padding: 0;
            /*margin: -0.0625em 0px 0px;*/
            height: 1.25em;
            width: 100%;

            z-index: 6;

            outline: none;
            background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
            font-size: 1.25em;
            margin-top: 4px;
            float: left;
        }

        .search_clear {
            float: right;
            color: #888;
            position: absolute;
            right: 5px;
            top: 7px;
            font-size: 14px;
            cursor: pointer;
            display: none;
        }

        .search_button {

            color: #888;
            position: absolute;
            left: 300px;
            top: 0;
            font-size: 14px;
            cursor: pointer;
        }

        .search_clear:hover {
            color: #c82400;
        }

        .woosmap-tableview-container {
            max-height: 325px;
            overflow: scroll;
        }

        .info_window_title {
        ...

JavaScript

var key = '12345678'; 
//var key = '12345678'; 

function woosmap_main() {
        var loader = new woosmap.MapsLoader();
        var dataSource = new woosmap.DataSource();
        loader.load(function () {

            var geocoder = new woosmap.location.GeocoderSearchSource({maxResultsReturn: 5});

            var searchview = new woosmap.ui.SearchView({
                template:woosmap.$('#search_template').html(),
                resultsTemplate: '<div class="location-results-choices">{{formattedAddress}}</div>',
                geolocText: "Ma position"
            });

            geocoder.bindTo('query', searchview, 'query', false);
            searchview.bindTo('locationResults', geocoder);
            searchview.bindTo('location', geocoder);

            var nearbyStoresSource = new woosmap.location.NearbyStoresSource(dataSource, 10);

            nearbyStoresSource.bindTo('location', geocoder);

            var tableview = new woosmap.ui.TableView({
                cell: '<div class="cell"><span style="font-weight:bold;">{{name}}</span>&nbsp;<span style="float:right">{{user_properties.address.city}} {{user_properties.address.zipcode}}<span></div>'
            });

            tableview.bindTo('stores', nearbyStoresSource);

            tableview.delegate = {
                didSelectStore: function (element) {
                },
                shouldAnimateSelectedStore: function() {
                    return true;
                }
            };

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

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