{"id":8494,"date":"2023-05-17T12:20:11","date_gmt":"2023-05-17T09:20:11","guid":{"rendered":"https:\/\/wp.berlingpaints.com\/points-of-sales\/"},"modified":"2025-10-07T15:07:53","modified_gmt":"2025-10-07T12:07:53","slug":"stores","status":"publish","type":"page","link":"https:\/\/www.berling.gr\/en\/stores\/","title":{"rendered":"Points Of Sales"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8494\" class=\"elementor elementor-8494 elementor-2694\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-2d37211 e-flex e-con-boxed e-con e-parent\" data-id=\"2d37211\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_top&quot;:&quot;pyramids&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M761.9,44.1L643.1,27.2L333.8,98L0,3.8V0l1000,0v3.9\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c80b6dd elementor-widget elementor-widget-spacer\" data-id=\"c80b6dd\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2380f44 elementor-widget elementor-widget-heading\" data-id=\"2380f44\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Points Of Sales (Greece &amp; Cyprus)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2be490d elementor-widget elementor-widget-spacer\" data-id=\"2be490d\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-a14e718 e-flex e-con-boxed e-con e-parent\" data-id=\"a14e718\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a09f56 elementor-widget elementor-widget-shortcode\" data-id=\"6a09f56\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!--<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBZEYeS_c7e-LnQrnzxoEaXUvug9_PCxfg&callback=initMap&libraries=geometry,visualization\" async defer><\/script>\r\n<script type=\"text\/javascript\" src=\"\/gooko\/pos\/markerclusterer.js\">-->\r\n\t\r\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBZEYeS_c7e-LnQrnzxoEaXUvug9_PCxfg&callback=initMap&libraries=geometry,visualization&region=GR&language=el\" async defer><\/script>\r\n\r\n\r\n\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-5b3e806 e-con-full e-flex e-con e-parent\" data-id=\"5b3e806\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a050046 elementor-widget elementor-widget-html\" data-id=\"a050046\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t  <div id=\"map\"><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-4dcbea9 e-flex e-con-boxed e-con e-parent\" data-id=\"4dcbea9\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d43be41 elementor-widget elementor-widget-text-editor\" data-id=\"d43be41\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div id=\"search-container\">\n\n<input id=\"location-input\" type=\"text\" placeholder=\"Enter Area\/City\/ZipCode or a place...\">\n<div><\/div>\n<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-784972e elementor-widget elementor-widget-text-editor\" data-id=\"784972e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div id=\"myAddress\"><\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-615e2e7 e-flex e-con-boxed e-con e-child\" data-id=\"615e2e7\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3faf148 elementor-align-center elementor-widget elementor-widget-elementskit-button\" data-id=\"3faf148\" data-element_type=\"widget\" data-widget_type=\"elementskit-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t<div class=\"ekit-btn-wraper\">\n\t\t\t\t\t\t\t<a class=\"elementskit-btn  whitespace--normal\" id=\"btn_search\">\n\t\t\t\t\t<i class=\"icon icon-search2\"><\/i>Search\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n        <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a7f406 elementor-align-center elementor-widget elementor-widget-elementskit-button\" data-id=\"6a7f406\" data-element_type=\"widget\" data-widget_type=\"elementskit-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t<div class=\"ekit-btn-wraper\">\n\t\t\t\t\t\t\t<a class=\"elementskit-btn  whitespace--normal\" id=\"btn_searchnear\">\n\t\t\t\t\t<i class=\"icon icon-location\"><\/i>Near me\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n        <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74c99f3 elementor-align-center elementor-widget elementor-widget-elementskit-button\" data-id=\"74c99f3\" data-element_type=\"widget\" data-widget_type=\"elementskit-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t<div class=\"ekit-btn-wraper\">\n\t\t\t\t\t\t\t<a class=\"elementskit-btn  whitespace--normal\" id=\"btn_reset\">\n\t\t\t\t\t<i class=\"icon icon-reload\"><\/i>Reset\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n        <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1515eef elementor-widget elementor-widget-text-editor\" data-id=\"1515eef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div id=\"store-table-container\" style=\"overflow-x:auto;\">\n<table id=\"store-table\">\n<tbody>\n<tr>\n<th>Shop<\/th>\n<th>Address<\/th>\n<th>Telephone<\/th>\n<th>Color Studio<\/th>\n<th>Distance<\/th>\n<th>Map<\/th>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<script>\tvar map;\r\n    var markers = [];\r\n    var stores = [];\r\n    var currentInfoWindow = null;\r\n    var myGPS = null;\r\n\r\n\r\n    function initMap() {\r\n\t\t\r\n      var myLatLng = {lat: 38.1206276, lng:21.6850281}; \/\/ Default map center (Greece)\r\n\r\n      map = new google.maps.Map(document.getElementById('map'), {\r\n        center: myLatLng,\r\n        zoom: 7,\r\n        styles: \r\n[\r\n  {\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#f5f5f5\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"elementType\": \"labels.icon\",\r\n    \"stylers\": [\r\n      {\r\n        \"visibility\": \"off\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#616161\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"elementType\": \"labels.text.stroke\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#f5f5f5\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"administrative.land_parcel\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#bdbdbd\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#eeeeee\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#757575\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi.business\",\r\n    \"stylers\": [\r\n      {\r\n        \"visibility\": \"off\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi.park\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#e5e5e5\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi.park\",\r\n    \"elementType\": \"labels.text\",\r\n    \"stylers\": [\r\n      {\r\n        \"visibility\": \"off\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi.park\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#9e9e9e\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#ffffff\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road.arterial\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#757575\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road.highway\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#dadada\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road.highway\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#616161\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road.local\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#9e9e9e\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"transit.line\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#e5e5e5\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"transit.station\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#eeeeee\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"water\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#c9c9c9\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"water\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#9e9e9e\"\r\n      }\r\n    ]\r\n  }\r\n]\r\n     \r\n\/\/\/****stylesend*******************************************************************************************\r\n\r\n      });\r\n      \r\n\t \r\n      loadStoreData();\r\n    }\r\n\r\n\/\/ Add event listener for Enter key press on location input field\r\n  var locationInput = document.getElementById('location-input');\r\n  locationInput.addEventListener('keyup', function(event) {\r\n    if (event.keyCode === 13) {\r\n      searchStores();\r\n    }\r\n  });\r\n\r\n\/\/ Add event listener for buttonreset\r\n  var searchClick = document.getElementById('btn_reset');\r\n  searchClick.addEventListener('click', function(event) {   \r\n\t  clearMarkers();\r\n      clearTable();\r\n      initMap();   \r\n  });\r\n\r\n\r\n\/\/ Add event listener for buttonClick\r\n  var searchClick = document.getElementById('btn_search');\r\n  searchClick.addEventListener('click', function(event) {    \r\n      searchStores();    \r\n  });\r\n\r\n\r\n\/\/ Add event listener for buttonClickNearStores\r\n  var searchClick = document.getElementById('btn_searchnear');\r\n  searchClick.addEventListener('click', function(event) {    \r\n     \t    if (navigator.geolocation) {\r\n   \t\t\t navigator.geolocation.getCurrentPosition(handleLocationSuccess, handleLocationError);\r\n  \t\t\t} else {\r\n   \t\t\t \/\/ Geolocation is not supported by the browser\r\n    \t\tdocument.getElementById('myAddress').innerHTML = '\u039f \u03b3\u03b5\u03c9\u03b5\u03bd\u03c4\u03bf\u03c0\u03b9\u03c3\u03bc\u03cc\u03c2 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03b5\u03bd\u03b5\u03c1\u03b3\u03cc\u03c2 \u03c3\u03c4\u03b7 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae \u03c3\u03b1\u03c2';\r\n  \t\t\t\t\t\t\t\t\t}\r\n  });\r\n\r\n\r\n\r\n\r\n\/\/ Function to get directions using Google Maps\r\nfunction getDirections(destLat, destLng) {\r\n\/\/  var origin = searchLocation.lat() + ',' + searchLocation.lng();\r\n  var destination = destLat + ',' + destLng;\r\n\/\/  console.log('LAT:'+destLat);\r\n\/\/  console.log('LNG:'+destLng);\r\n\/\/  console.log('Destination to send to url' + destination);\r\n\/\/  var directionsUrl = 'https:\/\/www.google.com\/maps\/dir\/?api=1&origin=' + origin + '&destination=' + destination;\r\n  var directionsUrl = 'https:\/\/www.google.com\/maps\/dir\/?api=1&destination=' + destLat;\r\n  window.open(directionsUrl, '_blank');\r\n}\r\n\r\n\r\nfunction loadStoreData() {\r\n     fetch('\/gooko\/pos\/stores.json')\t \r\n        .then(response => response.json())\r\n        .then(data => {\r\n          stores = data;\r\n\r\n          \/\/ Add markers for all stores to the map\r\n          stores.forEach(store => {\r\n            var storeLatLng = new google.maps.LatLng(store.lat, store.lng);\r\n            var marker = new google.maps.Marker({\r\n              position: storeLatLng,\r\n              map: map,\r\n              title: store.ShopName,\r\n              icon: '\/gooko\/pos\/img\/fandeck.png'\r\n            });\r\n\r\n            \/\/ Create an InfoWindow for each marker\r\n            var infoWindow = new google.maps.InfoWindow({\r\n              content: `<b>${store.ShopName}<\/b><br\/>\r\n                        ${store.Address}<br\/>\r\n                        ${store.Town} ${store.ZipCode}<br\/>\r\n                        ${store.Phone}<br\/>\r\n\t\t\t\t\t\t<p>${store.colorstudio||''}<\/p>\r\n\t\t\t<button onclick=\"getDirections('${store.lat},${store.lng}')\">\u039f\u0394\u0397\u0393\u0399\u0395\u03a3<\/button>`\r\n            });\r\n\r\n      marker.addListener('click', function() {\r\n        \/\/ Close the currently open InfoWindow, if any\r\n        if (currentInfoWindow) {\r\n          currentInfoWindow.close();\r\n        }\r\n\r\n        \/\/ Open the new InfoWindow\r\n        infoWindow.open(map, marker);\r\n\r\n        \/\/ Set the current InfoWindow to the newly opened InfoWindow\r\n        currentInfoWindow = infoWindow;\r\n      });\r\n            markers.push(marker);\r\n          });\r\n\r\n\r\n        \/\/--REM 27\/7\/23\r\n        \/\/var markerCluster = new MarkerClusterer(map, markers, {imagePath: '\/gooko\/pos\/img\/m'});\r\n\r\n\r\n\r\n      \/\/ Display heat map markers for close store markers\r\n      \/\/var heatmapData = storeMarkers.map(marker => marker.getPosition());\r\n      \/\/--REM 27\/7\/23\r\n\t \/\/var heatmapData = markers.map(marker => marker.getPosition());\r\n      \/\/var heatmap = new google.maps.visualization.HeatmapLayer({\r\n      \/\/  data: heatmapData,\r\n      \/\/  map: map\r\n      \/\/});\r\n\r\n        })\r\n        .catch(error => {\r\n          console.error('Error:', error);\r\n        });\r\n    }\r\n\r\nfunction clearHeatmap() {\r\n  if (heatmap) {\r\n    heatmap.setMap(null);\r\n    heatmap = null;\r\n  }\r\n}\r\n\r\n\r\nfunction searchStores() {\r\n  clearMarkers();\r\n  clearTable();\r\n\/\/  clearHeatMap();\r\n\r\n  var location = document.getElementById('location-input').value.trim();\r\n\r\n  \/\/ Use Google Geocoding API to convert location (city or ZIP code) to latlng coordinates\r\n  var geocoder = new google.maps.Geocoder();\r\n\r\n  geocoder.geocode({ address: location }, function(results, status) {\r\n    if (status === google.maps.GeocoderStatus.OK && results.length > 0) {\r\n      var searchLocation = results[0].geometry.location;\r\n\r\n      \/\/ Find the closest stores based on latlng coordinates\r\n      var closestStores = findClosestStores(searchLocation);\r\n\r\n      \r\n      \/\/ Add markers for the closest stores to the map and store details to the table\r\n      closestStores.forEach(store => {\r\n        var storeLatLng = new google.maps.LatLng(store.lat, store.lng);\r\n\r\n        var marker = new google.maps.Marker({\r\n          position: storeLatLng,\r\n          map: map,\r\n          title: store.ShopName,\r\n          \/\/icon: 'marker-icon.png'\r\n          icon: '\/gooko\/pos\/img\/fandeck.png',\r\n          \/\/icon: {\r\n          \/\/  path: google.maps.SymbolPath.CIRCLE,\r\n          \/\/  scale: 0\r\n    \t\/\/\t}\r\n        });\r\n\r\n        \/\/ Create an InfoWindow for each marker\r\n        \/\/var infoWindow = new google.maps.InfoWindow({\r\n        \/\/  content: `<img decoding=\"async\" src=\"\/gooko\/pos\/img\/fandeck.png\"><h3>${store.ShopName}<\/h3>\r\n        \/\/            <p>Address: ${store.Address}<br\/>${store.Town}<br\/>${store.ZipCode}<\/p>\r\n        \/\/            <p>Phone: ${store.Phone}<\/p>\r\n\t\t\/\/    <button onclick=\"getDirections('${store.lat},${store.lng}')\">Directions -><\/button>`\r\n\/\/\r\n  \/\/      });\r\n\t\t \/\/ Create an InfoWindow for each marker\r\n            var infoWindow = new google.maps.InfoWindow({\r\n              content: `<b>${store.ShopName}<\/b><br\/>\r\n                        ${store.Address}<br\/>\r\n                        ${store.Town} ${store.ZipCode}<br\/>\r\n                        ${store.Phone}<br\/>\r\n\t\t\t\t\t\t<p>${store.colorstudio||''}<\/p>\r\n\t\t\t<button onclick=\"getDirections('${store.lat},${store.lng}')\">\u039f\u0394\u0397\u0393\u0399\u0395\u03a3<\/button>`\r\n            }); \r\n\r\n        \/\/ Display store details when marker is clicked\r\n        marker.addListener('click', function() {\r\n          currentInfoWindow = null;\r\n          infoWindow.open(map, marker);\r\n        });\r\n\r\n        markers.push(marker);\r\n\r\n        \/\/ Add store details to the table\r\n        var distance = calculateDistance(searchLocation, storeLatLng);\r\n        \/\/addStoreToTable2(store, distance);\r\n        addStoreToTable3(store, distance, store.lat, store.lng);\r\n\r\n      });\r\n\r\n      \/\/ Center the map to the search location\r\n      map.setCenter(searchLocation);\r\n\r\n    \/\/ Adjust the map zoom level to fit the markers\r\n    var bounds = new google.maps.LatLngBounds();\r\n    markers.forEach(marker => {\r\n      bounds.extend(marker.getPosition());\r\n    });\r\n    map.fitBounds(bounds);\r\n \r\n\r\n\r\n\r\n    } else {\r\n      console.error('Geocode was not successful for the following reason: ' + status);\r\n    }\r\n  });\r\n}\r\n\r\nfunction searchNearStores() {\r\n  clearMarkers();\r\n  clearTable();\r\n\/\/  clearHeatMap();\r\n\r\n  \/\/var location = document.getElementById('location-input').value.trim();\r\n  \/\/\r\n  var location = String(myGPS.lat()+','+myGPS.lng());\r\n\r\n  \/\/ Use Google Geocoding API to convert location (city or ZIP code) to latlng coordinates\r\n  var geocoder = new google.maps.Geocoder();\r\n  console.log('Geocoder is:' + geocoder);\r\n  geocoder.geocode({ address: location }, function(results, status) {\r\n    if (status === google.maps.GeocoderStatus.OK && results.length > 0) {\r\n      var searchLocation = results[0].geometry.location;\r\n      \/\/document.getElementById('location-input').value=location;\r\n\t  document.getElementById('myAddress').innerHTML='\u03a3\u03c5\u03bd\u03b5\u03c1\u03b3\u03ac\u03c4\u03b5\u03c2 \u03ba\u03bf\u03bd\u03c4\u03ac \u03c3\u03c4\u03b7 \u03b4\u03b9\u03b5\u03cd\u03b8\u03c5\u03bd\u03c3\u03b7: ' + results[0].formatted_address;\r\n\t  \/\/console.log(results[0].formatted_address);\r\n\t  \/\/console.log(results[0]);\r\n\t  \/\/console.log(results[0].address_components[2].long_name);\r\n      \/\/ Find the closest stores based on latlng coordinates\r\n      var closestStores = findClosestStores(searchLocation);\r\n\r\n      \r\n      \/\/ Add markers for the closest stores to the map and store details to the table\r\n      closestStores.forEach(store => {\r\n        var storeLatLng = new google.maps.LatLng(store.lat, store.lng);\r\n\r\n        var marker = new google.maps.Marker({\r\n          position: storeLatLng,\r\n          map: map,\r\n          title: store.ShopName,\r\n          \/\/icon: 'marker-icon.png'\r\n          icon: '\/gooko\/pos\/img\/fandeck.png',\r\n          \/\/icon: {\r\n          \/\/  path: google.maps.SymbolPath.CIRCLE,\r\n          \/\/  scale: 0\r\n    \t  \/\/}\r\n        });\r\n\r\n        \/\/ Create an InfoWindow for each marker\r\n        var infoWindow = new google.maps.InfoWindow({\r\n          content: `<img decoding=\"async\" src=\"\/gooko\/pos\/img\/fandeck.png\"><h3>${store.ShopName}<\/h3>\r\n                    <p>Address: ${store.Address}<br\/>${store.Town}<br\/>${store.ZipCode}<\/p>\r\n                    <p>Phone: ${store.Phone}<\/p>\r\n\t\t    <button onclick=\"getDirections('${store.lat},${store.lng}')\">Directions -><\/button>`\r\n\r\n        });\r\n\r\n        \/\/ Display store details when marker is clicked\r\n        marker.addListener('click', function() {\r\n          currentInfoWindow = null;\r\n          infoWindow.open(map, marker);\r\n        });\r\n\r\n        markers.push(marker);\r\n\r\n        \/\/ Add store details to the table\r\n        var distance = calculateDistance(searchLocation, storeLatLng);\r\n        \/\/addStoreToTable2(store, distance);\r\n        addStoreToTable3(store, distance, store.lat, store.lng);\r\n\r\n      });\r\n\r\n      \/\/ Center the map to the search location\r\n      map.setCenter(searchLocation);\r\n\r\n    \/\/ Adjust the map zoom level to fit the markers\r\n    var bounds = new google.maps.LatLngBounds();\r\n    markers.forEach(marker => {\r\n      bounds.extend(marker.getPosition());\r\n    });\r\n    map.fitBounds(bounds);\r\n \r\n\r\n\r\n\r\n    } else {\r\n      console.error('Geocode was not successful for the following reason: ' + status);\r\n    }\r\n  });\r\n}\r\n\r\nfunction clearTable() {\r\n  document.getElementById('myAddress').innerHTML='';\t\r\n  var table = document.getElementById('store-table');\r\n  var rowCount = table.rows.length;\r\n\r\n  \/\/ Start from the last row and remove each row\r\n  for (var i = rowCount - 1; i > 0; i--) {\r\n    table.deleteRow(i);\r\n  }\r\n}\r\n\r\n\r\n    function findClosestStores(searchLocation) {\r\n      \/\/ Calculate the distance between two latlng coordinates (in meters)\r\n      function calculateDistance(location1, location2) {\r\n        return google.maps.geometry.spherical.computeDistanceBetween(location1, location2);\r\n      }\r\n\r\n      \/\/ Sort the stores array based on the distance from the search location\r\n      stores.sort(function(a, b) {\r\n        var location1 = new google.maps.LatLng(a.lat, a.lng);\r\n        var location2 = new google.maps.LatLng(b.lat, b.lng);\r\n\r\n        var distance1 = calculateDistance(searchLocation, location1);\r\n        var distance2 = calculateDistance(searchLocation, location2);\r\n\r\n        return distance1 - distance2;\r\n      });\r\n\r\n      \/\/ Return the closest stores (top 5)\r\n      return stores.slice(0, 6);\r\n    }\r\n\r\n    function clearMarkers() {\r\n      markers.forEach(marker => {\r\n        marker.setMap(null);\r\n      });\r\n      markers = [];\r\n    }\r\n \r\nfunction addStoreToTable(store) {\r\n  var tableBody = document.getElementById('store-table');\r\n  var row = document.createElement('tr');\r\n  var nameCell = document.createElement('td');\r\n  var addressCell = document.createElement('td');\r\n  var phoneCell = document.createElement('td');\r\n\r\n  nameCell.textContent = store.ShopName;\r\n  addressCell.textContent = store.Address;\r\n  phoneCell.textContent = store.Phone;\r\n\r\n  row.appendChild(nameCell);\r\n  row.appendChild(addressCell);\r\n  row.appendChild(phoneCell);\r\n\r\n  tableBody.appendChild(row);\r\n}\r\n\r\n\r\nfunction addStoreToTable2(store, distance) {\r\n  var table = document.getElementById('store-table');\r\n  var row = table.insertRow();\r\n\r\n  var nameCell = row.insertCell();\r\n  nameCell.textContent = store.ShopName;\r\n\r\n  var addressCell = row.insertCell();\r\n  addressCell.textContent = store.Address;\r\n\r\n  var phoneCell = row.insertCell();\r\n  phoneCell.textContent = store.Phone;\r\n\r\n  var distanceCell = row.insertCell();\r\n  distanceCell.textContent = distance.toFixed(2) + ' km';\r\n}\r\n\r\n\r\n\r\nfunction getDirectionsUrl(destLat, destLng) {\r\n\/\/  var origin = searchLocation.lat() + ',' + searchLocation.lng();\r\n  var destination = destLat + ',' + destLng;\r\n  var directionsUrl = 'https:\/\/www.google.com\/maps\/dir\/?api=1&destination=' + destination + '&travelmode=driving';\r\n  return directionsUrl;\r\n}\r\n\r\n\r\n\r\nfunction addStoreToTable3(store, distance, destLat, destLng) {\r\n  var table = document.getElementById('store-table');\r\n  var row = table.insertRow();\r\n\r\n  var nameCell = row.insertCell();\r\n  nameCell.textContent = store.ShopName;\r\n\r\n  var addressCell = row.insertCell();\r\n  addressCell.textContent = store.Address +' '+ store.Town +' ' + store.ZipCode;\r\n\r\n  var phoneCell = row.insertCell();\r\n  phoneCell.innerHTML = '<a href=\"tel:'+store.Phone+'\">'+store.Phone+'<\/a>';\r\n\t\r\n  var colorstudioCell = row.insertCell();\r\n  colorstudioCell.innerHTML= store.colorstudio||'';\r\n\r\n  var distanceCell = row.insertCell();\r\n  distanceCell.textContent = distance.toFixed(2) + ' km';\r\n\r\n  var driveMeCell = row.insertCell();\r\n  var driveMeLink = document.createElement('a');\r\n  console.log('Lat:'+destLat);\r\n  console.log('Lng:'+destLng);\r\n  driveMeLink.href = getDirectionsUrl(destLat, destLng);\r\n  driveMeLink.textContent = '\u039f\u0394\u0397\u0393\u0399\u0395\u03a3';\r\n  driveMeLink.target = '_blank';\r\n  driveMeCell.appendChild(driveMeLink);\r\n}\r\n\r\n\r\n\r\nfunction calculateDistance(searchLocation, storeLocation) {\r\n  var lat1 = searchLocation.lat();\r\n  var lng1 = searchLocation.lng();\r\n  var lat2 = storeLocation.lat();\r\n  var lng2 = storeLocation.lng();\r\n\r\n  var R = 6371; \/\/ Radius of the Earth in kilometers\r\n  var dLat = deg2rad(lat2 - lat1);\r\n  var dLng = deg2rad(lng2 - lng1);\r\n  var a =\r\n    Math.sin(dLat \/ 2) * Math.sin(dLat \/ 2) +\r\n    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *\r\n    Math.sin(dLng \/ 2) * Math.sin(dLng \/ 2);\r\n  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\r\n  var distance = R * c;\r\n\r\n  return distance;\r\n}\r\n\r\nfunction deg2rad(deg) {\r\n  return deg * (Math.PI \/ 180);\r\n}\r\n\r\n\r\n\/\/ Function to handle the success response of getting the user's location\r\nfunction handleLocationSuccess(position) {\r\n  var latitude = position.coords.latitude;\r\n  var longitude = position.coords.longitude;\t\r\n\t\/\/console.log('lat: '+ latitude);\r\n\t\/\/console.log('lng: '+ longitude);\r\n\tmyGPS = new google.maps.LatLng(latitude, longitude)\r\n\t\/\/console.log('myGPS: '+myGPS);\r\n\tconsole.log('S='+ myGPS.lat()+','+myGPS.lng());\r\n\tsearchNearStores();\r\n    map.setCenter(myGPS);\r\n\tmap.setZoom(12);\r\n  \/\/ Use the latitude and longitude to perform your desired actions\r\n  \/\/ For example, you can center the map to the user's location or perform a search based on their location\r\n}\r\n\r\n\/\/ Function to handle the error response of getting the user's location\r\nfunction handleLocationError(error) {\r\n  \/\/ Handle the error scenario, such as displaying a message to the user or falling back to a default location\r\n \/\/\/ MyGPS = {lat: 38.1206276, lng:21.6850281}; \/\/ Default map center (Greece)\r\n    document.getElementById('myAddress').innerHTML = '\u039f \u03b3\u03b5\u03c9\u03b5\u03bd\u03c4\u03bf\u03c0\u03b9\u03c3\u03bc\u03cc\u03c2 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03b5\u03bd\u03b5\u03c1\u03b3\u03cc\u03c2 \u03c3\u03c4\u03b7 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae \u03c3\u03b1\u03c2';\r\n\t\r\n\tmap.setCenter(myGPS);\r\n\tmap.setZoom(7);\r\n}\r\n\r\n\/\/ Request the user's location when the page loads\r\nwindow.addEventListener('DOMContentLoaded', function() {\r\n    var table = document.getElementById('store-table');\r\n  var rowCount = table.rows.length;\r\n  if (rowCount === 0) {\r\n    table.style.display = 'none !important';\r\n  }\r\n});\r\n\r\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Points Of Sales (Greece &amp; Cyprus) Search Near me Reset Shop Address Telephone Color Studio Distance Map<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-8494","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/8494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/comments?post=8494"}],"version-history":[{"count":3,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/8494\/revisions"}],"predecessor-version":[{"id":14336,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/8494\/revisions\/14336"}],"wp:attachment":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media?parent=8494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}