Meganissi Map<\/title>\n <meta\n name=\"viewport\"\n content=\"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\"\n \/>\n \n <link href='https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/6.x\/6.23.0\/maps\/maps.css' rel='stylesheet'\n type='text\/css'>\n <script src='https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/6.x\/6.23.0\/maps\/maps-web.min.js'><\/script>\n <link href='https:\/\/code.jquery.com\/ui\/1.12.1\/themes\/base\/jquery-ui.css' rel='stylesheet'>\n <script>(function(){ window.SS = window.SS || {}; SS.Require = function (callback){ if (typeof callback === 'function') { if (window.SS && SS.EventTrack) { callback(); } else { var siteSpect = document.getElementById('siteSpectLibraries'); var head = document.getElementsByTagName('head')[0]; if (siteSpect === null && typeof head !== 'undefined') { siteSpect = document.createElement('script'); siteSpect.type = 'text\/javascript'; siteSpect.src = '\/__ssobj\/core.js+ssdomvar.js+generic-adapter.js';siteSpect.async = true; siteSpect.id = 'siteSpectLibraries'; head.appendChild(siteSpect); } if (window.addEventListener){ siteSpect.addEventListener('load', callback, false); } else { siteSpect.attachEvent('onload', callback, false); } } } };})(); <\/script> <\/head> \n \n <script src='https:\/\/code.jquery.com\/jquery-1.12.4.js'><\/script>\n <script src='https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js'><\/script>\n\n <style>\n #map {\n width: 100vw;\n height: 90vh;\n }\n <\/style>\n\n <style>\n html {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n }\n \n *, *:before, *:after {\n box-sizing: inherit;\n }\n \n .control-panel {\n -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);\n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);\n \n }\n body {\n color: #707070;\n font-size: 12px;\n margin: 0;\n padding: 0;\n }\n \n a {\n text-decoration: none;\n }\n <\/style>\n\n\n<\/head>\n\n<body>\n <div class='control-panel'>\n <div class='heading'>\n \n <\/div>\n <div id='store-list'><\/div>\n <\/div>\n <div class='map' id='map'><\/div>\n <script>\n const apiKey = 'ijKYTDyAwF0jAp5ZwBadMnBAmC0iEVis';\n const map = tt.map({\n key: apiKey,\n container: 'map', \n style: `https:\/\/api.tomtom.com\/style\/1\/style\/*?map=2\/basic_street-satellite&poi=2\/poi_dynamic-satellite&key=${apiKey}`, \n center: [20.772382, 38.655160],\n zoom: 12\n \n });\n\n const markersCity = [];\n const list = document.getElementById('store-list');\n\n const stores = {\n \"type\": \"FeatureCollection\",\n \"features\": [{\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.760224,\n 38.658875\n ]\n },\n \"properties\": {\n \"address\": \"Selection of Points of Interest: \",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.759215,\n 38.661729\n ]\n },\n \"properties\": {\n \"address\": \"| Marina |, \",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.759435,\n 38.661083\n ]\n },\n \"properties\": {\n \"address\": \"| Porto Spilia Fish Restaurant |, \",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.759501,\n 38.659053\n ]\n },\n \"properties\": {\n \"address\": \"| Food store |, \",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.758838,\n 38.658616\n ]\n },\n \"properties\": {\n \"address\": \"| Villa Danae |\",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.784902,\n 38.662860\n ]\n },\n \"properties\": {\n \"address\": \"Selection of Points of Interest: \",\n \"city\": \"Vathy\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.781366,\n 38.664005\n ]\n },\n \"properties\": {\n \"address\": \"| Osysseas Marina |, \",\n \"city\": \"Vathy\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.784606,\n 38.663327\n ]\n },\n \"properties\": {\n \"address\": \"| Stavros Fish Restaurant |, \",\n \"city\": \"Vathy\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.786670,\n 38.661725\n ]\n },\n \"properties\": {\n \"address\": \"| Meganissi Sunset Luxury Villas |, \",\n \"city\": \"Vathy\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.785910,\n 38.662860\n ]\n },\n \"properties\": {\n \"address\": \"| Bakery |\",\n \"city\": \"Vathy\"\n }\n }\n ]\n };\n\n\n stores.features.forEach(function (store, index) {\n const city = store.properties.city;\n const address = store.properties.address;\n const location = store.geometry.coordinates;\n const marker = new tt.Marker().setLngLat(location).setPopup(new tt.Popup({\n offset: 35\n }).setHTML(address)).addTo(map);\n markersCity[index] = {\n marker,\n city\n };\n\n let cityStoresList = document.getElementById(city);\n if (cityStoresList === null) {\n const cityStoresListHeading = list.appendChild(document.createElement('h3'));\n cityStoresListHeading.innerHTML = city;\n cityStoresList = list.appendChild(document.createElement('div'));\n cityStoresList.id = city;\n cityStoresList.className = 'list-entries-container';\n cityStoresListHeading.addEventListener('click', function (e) {\n map.fitBounds(getMarkersBoundsForCity(e.target.innerText), {\n padding: 50\n });\n });\n }\n\n const details = buildLocation(cityStoresList, address);\n\n marker.getElement().addEventListener('click', function () {\n const activeItem = document.getElementsByClassName('selected');\n if (activeItem[0]) {\n activeItem[0].classList.remove('selected');\n }\n details.classList.add('selected');\n openCityTab(city);\n });\n\n details.addEventListener('click', function () {\n const activeItem = document.getElementsByClassName('selected');\n if (activeItem[0]) {\n activeItem[0].classList.remove('selected');\n }\n details.classList.add('selected');\n map.easeTo({\n center: marker.getLngLat(),\n zoom: 16\n });\n closeAllPopups();\n marker.togglePopup();\n\n });\n\n function buildLocation(htmlParent, text) {\n const details = htmlParent.appendChild(document.createElement('a'));\n details.href = '#';\n details.className = 'list-entry';\n details.innerHTML = text;\n return details;\n }\n\n function closeAllPopups() {\n markersCity.forEach(markerCity => {\n if (markerCity.marker.getPopup().isOpen()) {\n markerCity.marker.togglePopup();\n }\n });\n }\n\n function getMarkersBoundsForCity(city) {\n const bounds = new tt.LngLatBounds();\n markersCity.forEach(markerCity => {\n if (markerCity.city === city) {\n bounds.extend(markerCity.marker.getLngLat());\n }\n });\n return bounds;\n }\n\n function openCityTab(selected_id) {\n const storeListElement = $('#store-list');\n const citiesListDiv = storeListElement.find('div.list-entries-container');\n for (let activeCityIndex = 0; activeCityIndex < citiesListDiv.length; activeCityIndex++) {\n if (citiesListDiv[activeCityIndex].id === selected_id) {\n storeListElement.accordion('option', {\n 'active': activeCityIndex\n });\n }\n }\n }\n });\n\n $('#store-list').accordion({\n 'icons': {\n 'header': 'ui-icon-plus',\n 'activeHeader': 'ui-icon-minus'\n },\n 'heightStyle': 'content',\n 'collapsible': true,\n 'active': false\n });\n <\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Meganissi Map<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-984","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/pages\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qualityclub.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=984"}],"version-history":[{"count":1,"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/pages\/984\/revisions"}],"predecessor-version":[{"id":985,"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/pages\/984\/revisions\/985"}],"wp:attachment":[{"href":"https:\/\/qualityclub.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":984,"date":"2023-02-05T18:49:11","date_gmt":"2023-02-05T18:49:11","guid":{"rendered":"https:\/\/qualityclub.gr\/?page_id=984"},"modified":"2023-02-05T18:49:11","modified_gmt":"2023-02-05T18:49:11","slug":"meganissi-sat","status":"publish","type":"page","link":"https:\/\/qualityclub.gr\/?page_id=984","title":{"rendered":"Meganissi Sat"},"content":{"rendered":"\n\n\n\n\n \n \n Meganissi Map<\/title>\n <meta\n name=\"viewport\"\n content=\"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\"\n \/>\n \n <link href='https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/6.x\/6.23.0\/maps\/maps.css' rel='stylesheet'\n type='text\/css'>\n <script src='https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/6.x\/6.23.0\/maps\/maps-web.min.js'><\/script>\n <link href='https:\/\/code.jquery.com\/ui\/1.12.1\/themes\/base\/jquery-ui.css' rel='stylesheet'>\n <script>(function(){ window.SS = window.SS || {}; SS.Require = function (callback){ if (typeof callback === 'function') { if (window.SS && SS.EventTrack) { callback(); } else { var siteSpect = document.getElementById('siteSpectLibraries'); var head = document.getElementsByTagName('head')[0]; if (siteSpect === null && typeof head !== 'undefined') { siteSpect = document.createElement('script'); siteSpect.type = 'text\/javascript'; siteSpect.src = '\/__ssobj\/core.js+ssdomvar.js+generic-adapter.js';siteSpect.async = true; siteSpect.id = 'siteSpectLibraries'; head.appendChild(siteSpect); } if (window.addEventListener){ siteSpect.addEventListener('load', callback, false); } else { siteSpect.attachEvent('onload', callback, false); } } } };})(); <\/script> <\/head> \n \n <script src='https:\/\/code.jquery.com\/jquery-1.12.4.js'><\/script>\n <script src='https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js'><\/script>\n\n <style>\n #map {\n width: 100vw;\n height: 90vh;\n }\n <\/style>\n\n <style>\n html {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n }\n \n *, *:before, *:after {\n box-sizing: inherit;\n }\n \n .control-panel {\n -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);\n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);\n \n }\n body {\n color: #707070;\n font-size: 12px;\n margin: 0;\n padding: 0;\n }\n \n a {\n text-decoration: none;\n }\n <\/style>\n\n\n<\/head>\n\n<body>\n <div class='control-panel'>\n <div class='heading'>\n \n <\/div>\n <div id='store-list'><\/div>\n <\/div>\n <div class='map' id='map'><\/div>\n <script>\n const apiKey = 'ijKYTDyAwF0jAp5ZwBadMnBAmC0iEVis';\n const map = tt.map({\n key: apiKey,\n container: 'map', \n style: `https:\/\/api.tomtom.com\/style\/1\/style\/*?map=2\/basic_street-satellite&poi=2\/poi_dynamic-satellite&key=${apiKey}`, \n center: [20.772382, 38.655160],\n zoom: 12\n \n });\n\n const markersCity = [];\n const list = document.getElementById('store-list');\n\n const stores = {\n \"type\": \"FeatureCollection\",\n \"features\": [{\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.760224,\n 38.658875\n ]\n },\n \"properties\": {\n \"address\": \"Selection of Points of Interest: \",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.759215,\n 38.661729\n ]\n },\n \"properties\": {\n \"address\": \"| Marina |, \",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.759435,\n 38.661083\n ]\n },\n \"properties\": {\n \"address\": \"| Porto Spilia Fish Restaurant |, \",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.759501,\n 38.659053\n ]\n },\n \"properties\": {\n \"address\": \"| Food store |, \",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.758838,\n 38.658616\n ]\n },\n \"properties\": {\n \"address\": \"| Villa Danae |\",\n \"city\": \"Spartochori\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.784902,\n 38.662860\n ]\n },\n \"properties\": {\n \"address\": \"Selection of Points of Interest: \",\n \"city\": \"Vathy\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.781366,\n 38.664005\n ]\n },\n \"properties\": {\n \"address\": \"| Osysseas Marina |, \",\n \"city\": \"Vathy\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.784606,\n 38.663327\n ]\n },\n \"properties\": {\n \"address\": \"| Stavros Fish Restaurant |, \",\n \"city\": \"Vathy\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.786670,\n 38.661725\n ]\n },\n \"properties\": {\n \"address\": \"| Meganissi Sunset Luxury Villas |, \",\n \"city\": \"Vathy\"\n }\n },\n {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 20.785910,\n 38.662860\n ]\n },\n \"properties\": {\n \"address\": \"| Bakery |\",\n \"city\": \"Vathy\"\n }\n }\n ]\n };\n\n\n stores.features.forEach(function (store, index) {\n const city = store.properties.city;\n const address = store.properties.address;\n const location = store.geometry.coordinates;\n const marker = new tt.Marker().setLngLat(location).setPopup(new tt.Popup({\n offset: 35\n }).setHTML(address)).addTo(map);\n markersCity[index] = {\n marker,\n city\n };\n\n let cityStoresList = document.getElementById(city);\n if (cityStoresList === null) {\n const cityStoresListHeading = list.appendChild(document.createElement('h3'));\n cityStoresListHeading.innerHTML = city;\n cityStoresList = list.appendChild(document.createElement('div'));\n cityStoresList.id = city;\n cityStoresList.className = 'list-entries-container';\n cityStoresListHeading.addEventListener('click', function (e) {\n map.fitBounds(getMarkersBoundsForCity(e.target.innerText), {\n padding: 50\n });\n });\n }\n\n const details = buildLocation(cityStoresList, address);\n\n marker.getElement().addEventListener('click', function () {\n const activeItem = document.getElementsByClassName('selected');\n if (activeItem[0]) {\n activeItem[0].classList.remove('selected');\n }\n details.classList.add('selected');\n openCityTab(city);\n });\n\n details.addEventListener('click', function () {\n const activeItem = document.getElementsByClassName('selected');\n if (activeItem[0]) {\n activeItem[0].classList.remove('selected');\n }\n details.classList.add('selected');\n map.easeTo({\n center: marker.getLngLat(),\n zoom: 16\n });\n closeAllPopups();\n marker.togglePopup();\n\n });\n\n function buildLocation(htmlParent, text) {\n const details = htmlParent.appendChild(document.createElement('a'));\n details.href = '#';\n details.className = 'list-entry';\n details.innerHTML = text;\n return details;\n }\n\n function closeAllPopups() {\n markersCity.forEach(markerCity => {\n if (markerCity.marker.getPopup().isOpen()) {\n markerCity.marker.togglePopup();\n }\n });\n }\n\n function getMarkersBoundsForCity(city) {\n const bounds = new tt.LngLatBounds();\n markersCity.forEach(markerCity => {\n if (markerCity.city === city) {\n bounds.extend(markerCity.marker.getLngLat());\n }\n });\n return bounds;\n }\n\n function openCityTab(selected_id) {\n const storeListElement = $('#store-list');\n const citiesListDiv = storeListElement.find('div.list-entries-container');\n for (let activeCityIndex = 0; activeCityIndex < citiesListDiv.length; activeCityIndex++) {\n if (citiesListDiv[activeCityIndex].id === selected_id) {\n storeListElement.accordion('option', {\n 'active': activeCityIndex\n });\n }\n }\n }\n });\n\n $('#store-list').accordion({\n 'icons': {\n 'header': 'ui-icon-plus',\n 'activeHeader': 'ui-icon-minus'\n },\n 'heightStyle': 'content',\n 'collapsible': true,\n 'active': false\n });\n <\/script>\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Meganissi Map<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-984","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/pages\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qualityclub.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=984"}],"version-history":[{"count":1,"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/pages\/984\/revisions"}],"predecessor-version":[{"id":985,"href":"https:\/\/qualityclub.gr\/index.php?rest_route=\/wp\/v2\/pages\/984\/revisions\/985"}],"wp:attachment":[{"href":"https:\/\/qualityclub.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}