CINXE.COM
CountryMark Locations
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CountryMark Locations</title> <link href="/Content/css?v=cGpx2ZJfc2WsjTYg5G6g3IBDP2SfBLg6sB5WqqV86kY1" rel="stylesheet"/> <script src="/bundles/modernizr?v=inCVuEFe6J4Q07A0AcRsbJic_UE5MwpRMNGcOtk94TE1"></script> </head> <body> <div class="container body-content"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuS2mEpy1diQJ_J1wiYLi23SfqRj9IrW0"></script> <div class="content-container"> <div class="container h-100"> <div class="row standard-form pb-0"> <div class="container h-100 d-flex flex-column w-100"> <div class="row mb-2"> <div class="col-12 form-inline"> <label class="mr-3">Address/Zip</label> <input class="form-control-sm form-control mr-3" id="txtLocationFinder" type="text"> <input type="button" class="btn btn-primary mr-2 btn-sm" id="btnGeoLocateMe" onclick="searchFromAddress()" value="From Address"> <input type="button" class="btn btn-primary mr-0 mr-md-5 btn-sm" id="btnGeoLocateFromGps" onclick="geoLocateMe()" value="From My Location"> <label class="mr-3">Within</label> <select class="form-control" id="ddlDistance" onchange="updateMapFilters()"> <option value="0" selected="">All Locations</option> <option value="5">5 miles</option> <option value="10">10 miles</option> <option value="25" selected="">25 miles</option> <option value="50">50 miles</option> <option value="100">100 miles</option> </select> </div> </div> <div class="row mb-2"> <div class="col-12 form-inline"> <label class="mr-3">Filters</label> <input class="btn btn-primary" type="checkbox" id="cbxDiesel" data-toggle="toggle" data-size="mini" data-on="Diesel" data-off="Diesel" data-onstyle="primary" data-offstyle="default" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbxE15" data-toggle="toggle" data-size="mini" data-on="E15" data-off="E15" data-onstyle="primary" data-offstyle="default" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbxE85" data-toggle="toggle" data-size="mini" data-on="E85" data-off="E85" data-onstyle="primary" data-offstyle="default" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbxB20" data-toggle="toggle" data-size="mini" data-on="B20" data-off="B20" data-onstyle="primary" data-offstyle="default" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbx247" data-toggle="toggle" data-size="mini" data-on="24/7" data-off="24/7" data-onstyle="primary" data-offstyle="default" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbxDieselExhaust" data-toggle="toggle" data-size="mini" data-on="DEF" data-off="DEF" data-onstyle="primary" data-offstyle="default" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbxStore" data-toggle="toggle" data-size="mini" data-on="Convenience Store" data-off="Convenience Store" data-onstyle="primary" data-offstyle="default" data-width="160px" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbxMajorCc" data-toggle="toggle" data-size="mini" data-on="Major CC" data-off="Major CC" data-onstyle="primary" data-offstyle="default" data-width="100px" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbxVoyager" data-toggle="toggle" data-size="mini" data-on="Voyager" data-off="Voyager" data-onstyle="primary" data-offstyle="default" data-width="100px" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbxFleetCard" data-toggle="toggle" data-size="mini" data-on="CFN/Fleet Cards" data-off="CFN/Fleet Cards" data-onstyle="primary" data-offstyle="default" data-width="136px" onchange="updateMapFilters()"> <input class="btn btn-primary" type="checkbox" id="cbxEthanolFree" data-toggle="toggle" data-size="mini" data-on="Ethanol-Free" data-off="Ethanol-Free" data-onstyle="primary" data-offstyle="default" data-width="123px" onchange="updateMapFilters()"> </div> </div> </div> </div> <div class="row map-container"> <div class="h-100 d-flex flex-column w-100"> <div class="row flex-grow-1"> <div class="col-lg-3 col-md-3 col-sm-12 pr-0 pt-4 order-2 order-md-1"> <div id="planRoute" style="display:none"> Start: <input type="text" id="txtStartLocation" /><br /> Dest: <input type="text" id="txtDestination" /><br /> <input type="button" id="btnGetDirections" value="Get Directions" onclick="getDirections()" /> </div> <div class="storeCount"> <label id="lblStoreCount"></label> <label id="lblStoreCountText"></label> </div> <br /> <div id="storesListSpace" class="mr-3 mb-4" style="overflow-y: scroll; overflow-x: hidden; height: 500px; z-index: 500;"> </div> </div> <div class="col-lg-9 col-md-9 col-sm-12 pt-0 mt-0 pl-3 order-1 order-md-2"> <div id="map_canvas" style="min-height: 300px;"></div> </div> </div> </div> </div> </div> </div> <template id="storeTemplate"> <div class="row" id="ROWID"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <table class="storeListTable table table-sm table-borderless"> <tr> <td class="storeName"></td> </tr> <tr> <td class="storeAddress1"></td> </tr> <tr> <td class="storeAddress2"></td> </tr> <tr> <td class="storePhone"></td> </tr> <tr> <td class="storeDistance"></td> </tr> </table> </div> </div> </template> <style> .toggle.round, .toggle-on.round, .toggle-off.round { border-radius: 20px; } .toggle.round .toggle-handle { border-radius: 20px; } .toggle-off.round { background-color: lightgray; } .btn-default { background-color: lightgray; border-color: lightgray; color: #000; } #app { height: 95%; } .main-body { height: 95%; } #map_canvas { height: 100%; } #storesListSpace { position: relative; } .storeListTable { } .storeListTable.active { background-color: bisque; } .storeName { font-weight: bold; } .storeAddress1 { font-size: small; } .storeAddress2 { font-size: x-small; } .storePhone { font-size: x-small } .storeDistance { font-size: small; } input#btnGeoLocateMe { background-image: url(/images/search-icon.svg); color: transparent; font-size: 0; height: 30px; width: 30px; background-size: 25px 25px; background-repeat: no-repeat; background-position-x: center; background-position-y: center; } input#btnGeoLocateFromGps { background-image: url(/images/pin-icon.svg); color: transparent; font-size: 0; height: 30px; width: 30px; background-size: 25px 25px; background-repeat: no-repeat; background-position-x: center; background-position-y: center; } @media (max-width: 575px) { input#txtLocationFinder { width: 55%; } } .map-container { height: calc(100% - 120px); } @media (min-width: 1597px) { .map-container { height: calc(100% - 140px); } #storesListSpace { position: absolute; width: 100%; height: calc(100% - 87px) !important; } } @media screen and (max-width: 1596px) and (min-width: 1337px) { .map-container { height: calc(100% - 145px); } #storesListSpace { position: absolute; width: 100%; height: calc(100vh - 325px) !important; } } @media screen and (max-width: 1336px) and (min-width: 1025px) { .map-container { height: calc(100% - 180px); } #storesListSpace { position: absolute; width: 100%; height: calc(100vh - 365px) !important; } } @media screen and (max-width: 1024px) and (min-width: 768px) { .map-container { height: calc(100vh - 277px); } #storesListSpace { position: absolute; width: 100%; height: calc(100vh - 380px) !important; } } </style> </div> <script src="/bundles/jquery?v=8Oos0avDZyPg-cbyVzvkIfERIE1DGSe3sRQdCSYrgEQ1"></script> <script src="/bundles/bootstrap?v=0-88AYNDtPxqAJZpQW48mo9PmgpUPu3avatmepJxzMs1"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', initialize); google.maps.Map.prototype.clearMarkers = function () { for (var i = 0; i < markerArray.length; i++) { markerArray[i].setMap(null); } markerArray = new Array(); } var defaultLat = 39.768402; var defaultLon = -86.158066; var currentLat = 0; var currentLon = 0; var latLng = new google.maps.LatLng(defaultLat, defaultLon); var map; var infoWindow = new google.maps.InfoWindow(); var markerBounds = new google.maps.LatLngBounds(); var storesDisplayList = []; var markerArray = []; var myOptions = { zoom: 8, center: latLng, navigationControl: true, mapTypeControl: true, scaleControl: true, scrollwheel: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; var geocoder = new google.maps.Geocoder(); map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var runGeoLocate = function () { const $findStores = document.getElementById('btnFindStores'); $findStores.disabled = false; }; var stores = []; var loadStores = function () { $.ajax({ 'async': false, 'global': false, 'url': "https://countrymarktogo.com/apic/locator/getstorelocations", 'dataType': "json", 'success': function (data) { stores = data.RetailLocations; } }); }; loadStores(); var onGeolocateSuccess = function (coordinates) { currentLat = coordinates.coords.latitude; currentLon = coordinates.coords.longitude; updateMapFilters(); }; var onGeolocateError = function (error) { currentLat = defaultLat; currentLon = defaultLon; updateMapFilters(); }; var map; function initialize() { showMap(currentLat, currentLon); }; function showMap(lat, long) { var position = { lat: lat, lng: long }; const marker = new google.maps.Marker({ map: map, position: position }); // To add the marker to the map, call setMap(); marker.setMap(map); map.setCenter(position); }; var searchFromAddress = function () { var address = document.getElementById("txtLocationFinder").value; if (geocoder) { geocoder.geocode({ 'address': address }, function (results, status) { if (status === google.maps.GeocoderStatus.OK) { currentLat = results[0].geometry.location.lat(); currentLon = results[0].geometry.location.lng(); updateMapFilters(); } else { alert( "Unable to determine address location. Please enter a different location and try again. Reason: " + status); } }); } }; var showDirections = function (destination) { var d = document.getElementById("planRoute"); d.style.display = "block"; var currentSearchBox = document.getElementById("txtLocationFinder").value; var startBox = document.getElementById("txtStartLocation"); var endBox = document.getElementById("txtDestination"); endBox.value = destination; if (currentSearchBox !== null && currentSearchBox !== undefined && currentSearchBox !== "") { startBox.value = currentSearchBox; } else { var latLng = new google.maps.LatLng(currentLat, currentLon); if (geocoder) { geocoder.geocode({ 'location': latLng }, function (results, status) { if (status === google.maps.GeocoderStatus.OK) { startBox.value = results[0].formatted_address; } else { startBox.value = ""; } }); } else { startBox.value = ""; } } }; var getDirections = function () { var d = document.getElementById("planRoute"); d.style.display = "none"; var startBox = document.getElementById("txtStartLocation"); var endBox = document.getElementById("txtDestination"); var start = encodeURIComponent(startBox.value); var end = encodeURIComponent(endBox.value); window.open("https://www.google.com/maps/dir/?api=1&destination=" + end + "&origin=" + start); }; var geoLocateMe = function () { if (window.navigator && window.navigator.geolocation) { navigator.geolocation.getCurrentPosition(onGeolocateSuccess, onGeolocateError); } else { onGeolocateError(null); } }; geoLocateMe(); var updateMapFilters = function () { map.clearMarkers(); showMap(currentLat, currentLon); updateStoresDisplayList(); storesDisplayList.sort(storeDistanceSort); buildSideListAndMarkers(storesDisplayList); }; var buildSideListAndMarkers = function (storeList) { var list = document.querySelector("#storesListSpace"); list.innerHTML = ""; for (var x = 0; x < storeList.length; x++) { let store = storeList[x]; var nodeId = "store" + (x + 1); var template = document.querySelector('#storeTemplate'); var clone = document.importNode(template.content, true); clone.getElementById('ROWID').id = nodeId; //var addy = store.address + ", " + store.city + ", " + store.state + " " + store.zip; var td = clone.querySelectorAll("td"); //td[0].textContent = store.locationName; td[0].innerHTML = '<a name="' + nodeId + '"></a>' + (x + 1) + ") " + store.Address; td[1].textContent = store.City + ", " + store.State + " " + store.Zip; td[2].textContent = store.Phone; var link = document.createElement('input'); link.setAttribute('type', 'button'); link.setAttribute('value', 'Get Directions'); link.setAttribute('onclick', function () { showDirections(store.Address + ", " + store.City + ", " + store.State + " " + store.Zip); }); link.onclick = function () { showDirections(store.Address + ", " + store.City + ", " + store.State + " " + store.Zip); }; td[4].textContent = store.Distance + ' mile(s) '; td[4].appendChild(link); clone.nodeId = nodeId; list.appendChild(clone); var services = ""; if (store.Diesel) services = services + "Diesel <br /> "; if (store.E15) services = services + "E15 <br /> "; if (store.E85) services = services + "E85 <br /> "; if (store.B20) services = services + "B20 <br /> "; if (store.ExhaustFluid) services = services + "DEF <br/> "; if (store.EthanolFree) services = services = "Ethanol - free gas <br/> "; if (store.Open247) services = services + "Open 24 / 7 <br/> "; if (store.ConvenienceStore) services = services + "Convenience store <br/> "; if (store.MajorCC) services = services + "Major CC <br/> "; if (store.CfnCards) services = services + "CFN / Fleet cards <br/> "; if (store.Voyager) services = services + "Voyager <br/> "; var letter = x + 1; var sidebarValue = '<table cellspacing="1" cellpadding="2" border="0"><tr valign="top"><td style="padding - top: 2px; color: #FF0000; font - size: 14px; "><strong>' + letter + ')</strong></td><td style="width: 7px; "> </td><td><a href="#" style="color: #0000FF; font - size: 14px; font - weight: bold; " onclick="runNavigate(' + x + ')">' + store.Address + '</a><br />' + store.City + ', ' + store.State + ' ' + store.Zip; var contentValue = '<div style="font: normal 11px Verdana, Arial, Helvetica, sans - serif; ">' + sidebarValue + '<div style="text - decoration: underline"; color="#999999"><strong>Services Offered</strong></div>Gas<br />' + services + '</div>'; makeMarker({ icon: '/images/gaspump.png', position: new google.maps.LatLng(store.Latitude, store.Longitude), title: storesDisplayList[x].LocationName, sidebarItem: clone, content: contentValue }); } }; var runNavigate = function (counter) { if (storesDisplayList.length >= counter) { var store = storesDisplayList[counter]; showDirections(store.Address + ", " + store.City + ", " + store.State + " " + store.Zip); } }; var updateStoresDisplayList = function () { storesDisplayList = []; var diesel = document.getElementById("cbxDiesel").checked; var e15 = document.getElementById("cbxE15").checked; var e85 = document.getElementById("cbxE85").checked; var b20 = document.getElementById("cbxB20").checked; var hours247 = document.getElementById("cbx247").checked; var dieselExhaust = document.getElementById("cbxDieselExhaust").checked; var convStore = document.getElementById("cbxStore").checked; var majorCc = document.getElementById("cbxMajorCc").checked; var fleetCard = document.getElementById("cbxFleetCard").checked; var voyager = document.getElementById("cbxVoyager").checked; var ethanolFree = document.getElementById("cbxEthanolFree").checked; var distDDL = document.getElementById("ddlDistance"); var distance = parseInt(distDDL.options[distDDL.selectedIndex].value); storesDisplayList = stores.filter(function (store) { //check filtertags if (diesel === true && store.Diesel !== true) return false; if (e15 === true && store.E15 !== true) return false; if (e85 === true && store.E85 !== true) return false; if (b20 === true && store.B20 !== true) return false; if (hours247 === true && store.Open247 !== true) return false; if (dieselExhaust === true && store.ExhaustFluid !== true) return false; if (convStore === true && store.ConvenienceStore !== true) return false; if (majorCc === true && store.MajorCC !== true) return false; if (fleetCard === true && store.CfnCards !== true) return false; if (voyager === true && store.Voyager !== true) return false; if (ethanolFree === true && store.EthanolFree !== true) return false; //now check distance store.Distance = distanceCalc(store.Latitude, store.Longitude, currentLat, currentLon); if (distance === 0) return true; if (store.Distance < distance) return true; return false; }); var count = storesDisplayList.length; document.getElementById('lblStoreCount').innerHTML = count; if (count === 1) { document.getElementById('lblStoreCountText').innerHTML = "location"; } else { document.getElementById('lblStoreCountText').innerHTML = "locations"; } }; var storeDistanceSort = function (a, b) { return (a.Distance - b.Distance); }; var distanceCalc = function (lat1, lon1, lat2, lon2) { if ((lat1 === lat2) && (lon1 === lon2)) return 0; var radlat1 = Math.PI * lat1 / 180; var radlat2 = Math.PI * lat2 / 180; var theta = lon1 - lon2; var radtheta = Math.PI * theta / 180; var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); if (dist > 1) dist = 1; dist = Math.acos(dist); dist = dist * 180 / Math.PI; dist = dist * 60 * 1.1515; return Math.round(dist * 10) / 10; }; var makeMarker = function (options) { var pin = new google.maps.Marker({ optimized: false, map: map }); pin.setOptions(options); google.maps.event.addListener(pin, "click", function () { infoWindow.setOptions(options); infoWindow.open(map, pin); if (this.sidebarButton) this.sidebarButton.button.focus(); if (options.sidebarItem && options.sidebarItem.nodeId) { var storeid = "#" + options.sidebarItem.nodeId; $('#storesListSpace').scrollTop($(storeid).position().top); var storetable = $(storeid).find('.storeListTable'); $('#storesListSpace .storeListTable').removeClass('active'); storetable.addClass('active'); } }); var idleIcon = pin.getIcon(); if (options.sidebarItem) { //pin.sidebarButton = new SidebarItem(pin, options); //pin.sidebarButton.addIn("sidebar"); } markerBounds.extend(options.position); markerArray.push(pin); return pin; }; var SidebarItem = function (marker, opts) { var tag = opts.sidebarItemType || "link"; if (navigator.userAgent.indexOf('Firefox') !== -1) { var row = document.createElement(tag); } else { var row = document.createElement(tag); row.innerHTML = opts.sidebarItem; row.className = opts.sidebarItemClassName || "sidebar_item"; row.style.display = "block"; row.style.width = opts.sidebarItemWidth || "180px"; row.onclick = function () { google.maps.event.trigger(marker, 'click'); } row.onmouseover = function () { google.maps.event.trigger(marker, 'mouseover'); } row.onmouseout = function () { google.maps.event.trigger(marker, 'mouseout'); } this.button = row; } }; SidebarItem.prototype.addIn = function (block) { if (block && block.nodeType === 1) this.div = block; else this.div = document.getElementById(block) || document.getElementById("sidebar") || document.getElementsByTagName("body")[0]; this.div.appendChild(this.button); }; // Fixing jumpy scrollbards on retail locator map for Chrome / Windows function removeMapScroll(largeScreen) { if (largeScreen.matches) { // If media query matches $(document).ready(function () { $(".content-container:has(.map-container)").css("overflow", "hidden"); }); } else { $(document).ready(function () { $(".content-container:has(.map-container)").css("overflow", "auto"); }); } } var largeScreen = window.matchMedia("(min-width: 1025px)") removeMapScroll(largeScreen) largeScreen.addListener(removeMapScroll) </script> </body> </html>