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