var shortcodeMap;
function shortcodeInitMap(lat=null, lng=null, zoom=null){
class CustomInfoWindow extends google.maps.OverlayView {
constructor(){
super();
this.div=null;
this.position=null;
this.visible=false;
}
onAdd(){
this.div=document.createElement('div');
this.div.className='custom-infowindow';
this.getPanes().floatPane.appendChild(this.div);
this.div.addEventListener('click', function (event){
event.stopPropagation();
});
this.div.addEventListener('touchstart', function (event){
event.stopPropagation();
});
}
draw(){
if(!this.position||!this.div||!this.visible) return;
const overlayProjection=this.getProjection();
const pixelPosition=overlayProjection.fromLatLngToDivPixel(this.position);
if(pixelPosition){
this.div.style.left=`${pixelPosition.x}px`;
this.div.style.top=`${pixelPosition.y}px`;
this.div.style.display='block';
const divHeight=this.div.offsetHeight;
const divWidth=this.div.offsetWidth;
if(window.innerWidth < 992){
const offsetX=-(divWidth / 2);
this.div.style.transform=`translate(${offsetX}px, 30px)`;
}else{
const offsetY=-(divHeight / 3) * 2;
this.div.style.transform=`translate(42px, ${offsetY}px)`;
}}
}
onRemove(){
if(this.div){
this.div.parentNode.removeChild(this.div);
this.div=null;
}}
setContent(content){
if(this.div){
this.div.innerHTML=content;
}}
setPosition(position){
this.position=position;
if(this.div){
this.draw();
}}
show(){
if(this.div){
this.visible=true;
this.div.style.display='block';
this.draw();
}}
hide(){
if(this.div){
this.visible=false;
this.div.style.display='none';
}}
}
const shortcodeMapStyle=[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f8f8fa"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f8f8fa"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeedf2"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#eeedf2"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#eeedf2"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#dad8e3"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dad8e3"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#dad8e3"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#dad8e3"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeedf2"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
];
var svg_std=[
'<svg width="45" height="45" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">',
'<rect x="0.924805" y="0.5" width="43.0668" height="43" rx="21.5" fill="white"/>',
'<rect x="0.924805" y="0.5" width="43.0668" height="43" rx="21.5" stroke="#215682"/>',
'<path d="M22.4246 13.6666C19.1996 13.6666 16.5913 16.275 16.5913 19.5C16.5913 23.875 22.4246 30.3333 22.4246 30.3333C22.4246 30.3333 28.258 23.875 28.258 19.5C28.258 16.275 25.6496 13.6666 22.4246 13.6666ZM22.4246 21.5833C21.8721 21.5833 21.3422 21.3638 20.9515 20.9731C20.5608 20.5824 20.3413 20.0525 20.3413 19.5C20.3413 18.9474 20.5608 18.4175 20.9515 18.0268C21.3422 17.6361 21.8721 17.4166 22.4246 17.4166C22.9772 17.4166 23.5071 17.6361 23.8978 18.0268C24.2885 18.4175 24.508 18.9474 24.508 19.5C24.508 20.0525 24.2885 20.5824 23.8978 20.9731C23.5071 21.3638 22.9772 21.5833 22.4246 21.5833Z" fill="#215682"/>',
'</svg>'
].join('\n');
var svg_nearest=[
'<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">',
'<rect width="44" height="44" rx="22" fill="#66C1BF"/>',
'<path d="M22.0007 13.3523C18.654 13.3523 15.9473 16.059 15.9473 19.4057C15.9473 23.9458 22.0007 30.6478 22.0007 30.6478C22.0007 30.6478 28.0541 23.9458 28.0541 19.4057C28.0541 16.059 25.3474 13.3523 22.0007 13.3523ZM22.0007 21.5676C21.4273 21.5676 20.8774 21.3399 20.472 20.9344C20.0665 20.529 19.8387 19.9791 19.8387 19.4057C19.8387 18.8323 20.0665 18.2824 20.472 17.877C20.8774 17.4716 21.4273 17.2438 22.0007 17.2438C22.5741 17.2438 23.124 17.4716 23.5294 17.877C23.9348 18.2824 24.1626 18.8323 24.1626 19.4057C24.1626 19.9791 23.9348 20.529 23.5294 20.9344C23.124 21.3399 22.5741 21.5676 22.0007 21.5676Z" fill="white"/>',
'</svg>'
].join('\n');
var mapOptions={
center: {lat: 42.655583, lng: 12.846389},
mapTypeId: "shortcodeMapStyle",
fullscreenControl: false,
mapTypeControl: false,
streetViewControl: false,
zoom: 9,
clickableIcons: false,
zoomControl: false,
};
if(lat!=null&&lng!=null){
mapOptions.center={lat: lat, lng: lng};}
if(zoom!=null){
mapOptions.zoom=zoom;
}
shortcodeMap =
new google.maps.Map(document.querySelector('.shortcode-maps-container .map-container-shortcode'), mapOptions);
shortcodeMap.mapTypes.set('shortcodeMapStyle',
new google.maps.StyledMapType(shortcodeMapStyle, {name: 'Shortcode Map Style'}));
var markers=[];
maxDistance=document.querySelector('#centri-list').getAttribute('data-distance-max');
maxDistance=parseInt(maxDistance);
locations=document.querySelectorAll('#centri-list .box-location');
var nearestMarkerIdx=-1;
var nearestMarkerDistance=null;
for (let i=0; i < locations.length; i++){
loc_lat=locations[i].getAttribute('data-lat');
loc_lng=locations[i].getAttribute('data-lng');
distance=locations[i].getAttribute('data-distance');
markers.push({
position: {lat: parseFloat(loc_lat), lng: parseFloat(loc_lng)},
content: '<div class="tab-content"><div class="tab-box"><div class="box-location">' +
locations[i].innerHTML +
'</div></div></div>'
});
if(nearestMarkerDistance===null||parseInt(distance) < nearestMarkerDistance){
nearestMarkerDistance=distance;
nearestMarkerIdx=markers.length - 1;
}}
var currentMarker=null;
const customInfoWindow=new CustomInfoWindow();
customInfoWindow.setMap(shortcodeMap);
var nearestMarker=null;
for (var i=0; i < markers.length; i++){
const marker=new google.maps.Marker({
position: markers[i].position,
content: markers[i].content,
map: shortcodeMap,
icon: {url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg_std)}});
if(i===nearestMarkerIdx){
nearestMarker=marker;
}
marker.addListener('click', function (){
customInfoWindow.setContent(marker.content);
customInfoWindow.setPosition(marker.getPosition());
customInfoWindow.show();
const overlayProjection=customInfoWindow.getProjection();
const pixelPosition=overlayProjection.fromLatLngToDivPixel(marker.getPosition());
const divHeight=customInfoWindow.div.offsetHeight;
const divWidth=customInfoWindow.div.offsetWidth;
const centerPixel=calculateCenterForIW(divWidth, divHeight, pixelPosition);
const centerLatLng=overlayProjection.fromDivPixelToLatLng(centerPixel);
shortcodeMap.panTo(centerLatLng);
setActiveMarker(marker);
});
}
var options={
componentRestrictions: {country: "it"}};
var autocomplete=document.querySelectorAll('.autocomplete');
for (let i=0; i < autocomplete.length; i++){
new google.maps.places.Autocomplete(autocomplete[i], options);
}
google.maps.event.addListener(shortcodeMap, "click", function (event){
if(customInfoWindow){
customInfoWindow.hide();
}
if(currentMarker){
setInactiveMarker(currentMarker)
}});
google.maps.event.addListenerOnce(shortcodeMap, 'idle', function(){
if(nearestMarker!==null){
new google.maps.event.trigger(nearestMarker, 'click');
nearestMarker.setIcon({url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg_nearest)});
}});
function setActiveMarker(marker){
currentMarker=marker;
}
function setInactiveMarker(marker){
currentMarker=null;
}
function calculateCenterForIW(divWidth, divHeight, pixelPosition){
let offsetY, offsetX;
if(window.innerWidth < 992){
offsetY=-(divHeight / 2);
offsetX=0;
}else{
offsetY=(divHeight / 5);
offsetX=(divWidth / 2);
}
return new google.maps.Point(pixelPosition.x + offsetX,
pixelPosition.y - offsetY
);
}}
document.addEventListener("DOMContentLoaded", function (){
const shortcodeCalcSubmit=document.querySelector('.shortcode-maps-container .cta');
if(shortcodeCalcSubmit!=null){
shortcodeCalcSubmit.addEventListener('click', function (){
address=this.parentNode.querySelector('input');
if(address.value!=''){
address.disabled=true;
address.classList.add('input-loading');
shortcodeCalcSubmit.classList.add('cta-loading');
var grecaptcha_key=document.getElementById('g-recaptcha').getAttribute('src').split('render=')[1];
grecaptcha.ready(function (){
grecaptcha.execute(grecaptcha_key, {action: 'submit'}).then(function (token){
let myData='action=dp_get_latlng_by_address&g-recaptcha-response=' +
token +
'&address=' +
address.value;
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function (){
if(this.readyState==4&&this.status==200){
var latlng=xhttp.responseText;
address.disabled=false;
address.classList.remove('input-loading');
shortcodeCalcSubmit.classList.remove('cta-loading');
var lat=null, lng=null;
if(isJson(latlng)){
latlng=JSON.parse(latlng);
lat=latlng.lat;
lng=latlng.lng;
}else{
if(latlng.indexOf(',')!=-1){
latlng=address.trim().split(',');
lat=latlng[0];
lng=latlng[1];
}}
if(lat!=null&&lng!=null){
locations=document.querySelectorAll('#centri-list .box-location');
maxDistance =
document.querySelector('#centri-list').getAttribute('data-distance-max');
for (let i=0; i < locations.length; i++){
loc_lat=locations[i].getAttribute('data-lat');
loc_lng=locations[i].getAttribute('data-lng');
distance=calcDistance(lat, lng, loc_lat, loc_lng);
locations[i].querySelector('.box-location-distance').innerHTML =
'<span>' + Math.round(distance) + ' Km</span>';
locations[i].parentNode.style.order=Math.round(distance);
locations[i].setAttribute('data-distance', Math.round(distance));
}
shortcodeInitMap(lat, lng, 13);
}}
};
let link=document.getElementById('ajaxurl').getAttribute('href');
xhttp.open("POST", link, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
xhttp.send(myData);
});
});
}});
}
function isJson(str){
try {
JSON.parse(str);
}
catch (e){
return false;
}
return true;
}
function calcDistance(lat1, lon1, lat2, lon2){
const earthRadius=6371;
const dLat=(lat2 - lat1) * Math.PI / 180;
const dLon=(lon2 - lon1) * Math.PI / 180;
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c=2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance=earthRadius * c;
return distance;
}
var smc=document.getElementById('shortcode-search-box-container');
var inputStoreLocator=document.getElementById('inputstorelocator')
if(smc!=null&&inputStoreLocator){
document
.getElementById("inputstorelocator")
.addEventListener("keydown", function (event){
if(event.keyCode===13){
event.preventDefault();
smc.getElementsByClassName("cta booking-search")[0].click();
}});
}});
window.addEventListener('load', function (){
var inputStoreLocator=document.getElementById('inputstorelocator')
if(inputStoreLocator&&inputStoreLocator.value!==""){
document
.getElementById("shortcode-maps-container")
.getElementsByClassName("cta booking-search")[0]
.click();
}else if(document.querySelector(".shortcode-maps-container .map-container-shortcode")
){
shortcodeInitMap();
}});
function dp_shortcode_map_adjustElementPosition(){
const element=document.getElementById('shortcode-search-box-container');
const mapRef=document.getElementById('map-container-shortcode');
const newTopPosition=mapRef.offsetTop + 20;
element.style.top=`${newTopPosition}px`;
}
window.addEventListener('resize', function (){
dp_shortcode_map_adjustElementPosition;
});
document.addEventListener("updatePagedCards", function (){
document.getElementById("locator-results-desk-pagination").innerHtml='';
document.getElementById("locator-results-mobile-pagination").innerHtml='';
dp_shortcode_map_manageDesktopCards();
dp_shortcode_map_manageMobileCards();
});
function dp_shortcode_map_manageDesktopCards(){
const pages=document.querySelectorAll(".locator-results-desk .col-single-box");
const pagination=document.getElementById("locator-results-desk-pagination");
let currentPage=0;
const maxVisiblePages=3;
function getTallestBoxLocationHeight(){
let maxHeight=0;
pages.forEach(page=> {
page.style.display='flex';
const boxLocations=page.querySelectorAll(".box-location");
boxLocations.forEach(box=> {
const boxHeight=box.scrollHeight;
if(boxHeight > maxHeight){
maxHeight=boxHeight;
}});
page.style.display='';
});
return maxHeight;
}
function setBoxLocationsHeight(height){
pages.forEach(page=> {
const boxLocations=page.querySelectorAll(".box-location");
boxLocations.forEach(box=> {
box.style.height=`${height}px`;
});
});
}
function updateHeights(){
const tallestBoxLocationHeight=getTallestBoxLocationHeight();
setBoxLocationsHeight(tallestBoxLocationHeight);
}
function showPage(pageIndex){
pages.forEach((p, index)=> {
p.classList.toggle("active", index===pageIndex);
p.style.display=index===pageIndex ? 'block':'none';
});
currentPage=pageIndex;
updatePagination();
updateButtons();
}
function updateButtons(){
const prevButton=document.getElementById("prevButton");
const nextButton=document.getElementById("nextButton");
prevButton.disabled=currentPage===0;
nextButton.disabled=currentPage===pages.length - 1;
prevButton.classList.remove("active");
nextButton.classList.remove("active");
if(currentPage===0){
prevButton.classList.add("disabled");
}
if(currentPage===pages.length - 1){
nextButton.classList.add("disabled");
}}
function createPagination(){
pagination.innerHTML='';
const prevButton=document.createElement("button");
prevButton.id="prevButton";
prevButton.textContent="<";
prevButton.className="nav-button";
prevButton.addEventListener("click", function (){
if(currentPage > 0) showPage(currentPage - 1);
});
pagination.appendChild(prevButton);
const nextButton=document.createElement("button");
nextButton.id="nextButton";
nextButton.textContent=">";
nextButton.className="nav-button";
nextButton.addEventListener("click", function (){
if(currentPage < pages.length - 1) showPage(currentPage + 1);
});
pagination.appendChild(nextButton);
updatePagination();
}
function updatePagination(){
const cardLinks=document.querySelectorAll("#locator-results-desk-pagination .card-link, #locator-results-desk-pagination .ellipsis");
cardLinks.forEach(link=> link.remove());
const totalPages=pages.length;
let startPage=Math.max(currentPage - 1, 0);
let endPage=Math.min(currentPage + 1, totalPages - 1);
if(currentPage - 1 < 0){
endPage=Math.min(maxVisiblePages - 1, totalPages - 1);
}
if(currentPage + 1 > totalPages - 1){
startPage=Math.max(totalPages - maxVisiblePages, 0);
}
if(startPage > 0){
addPageLink(0);
if(startPage > 1) addEllipsis();
}
for (let i=startPage; i <=endPage; i++){
addPageLink(i);
}
if(endPage < totalPages - 1){
if(endPage < totalPages - 2) addEllipsis();
addPageLink(totalPages - 1);
}
pagination.appendChild(document.getElementById("nextButton"));
}
function addPageLink(page){
const cardLink=document.createElement("button");
cardLink.textContent=page + 1;
cardLink.className="card-link";
cardLink.addEventListener("click", function (){
showPage(page);
});
pagination.insertBefore(cardLink, document.getElementById("nextButton"));
if(page===currentPage){
cardLink.classList.add("active");
}}
function addEllipsis(){
const ellipsis=document.createElement("span");
ellipsis.textContent="...";
ellipsis.className="ellipsis";
pagination.insertBefore(ellipsis, document.getElementById("nextButton"));
}
createPagination();
updateHeights();
showPage(currentPage);
window.addEventListener("resize", updateHeights);
}
function dp_shortcode_map_manageMobileCards(){
const pages=document.querySelectorAll(".locator-results-mobile .col-single-box");
const pagination=document.getElementById("locator-results-mobile-pagination");
let currentPage=0;
const maxVisiblePages=3;
function getTallestBoxLocationHeight(){
let maxHeight=0;
pages.forEach(page=> {
page.style.display='flex';
const boxHeight=page.scrollHeight;
if(boxHeight > maxHeight){
maxHeight=boxHeight;
}
page.style.display='';
});
return maxHeight;
}
function setBoxLocationsHeight(height){
pages.forEach(page=> {
page.style.height=`${height}px`;
});
}
function showPage(pageIndex){
pages.forEach((p, index)=> {
p.classList.toggle("active", index===pageIndex);
p.style.display=index===pageIndex ? 'block':'none';
});
currentPage=pageIndex;
updatePagination();
updateButtons();
}
function updateButtons(){
const prevButton=document.getElementById("prevButtonMobile");
const nextButton=document.getElementById("nextButtonMobile");
prevButton.disabled=currentPage===0;
nextButton.disabled=currentPage===pages.length - 1;
prevButton.classList.remove("active");
nextButton.classList.remove("active");
if(currentPage===0){
prevButton.classList.add("disabled");
}
if(currentPage===pages.length - 1){
nextButton.classList.add("disabled");
}}
function createPagination(){
pagination.innerHTML='';
const prevButton=document.createElement("button");
prevButton.id="prevButtonMobile";
prevButton.textContent="<";
prevButton.className="nav-button";
prevButton.addEventListener("click", function (){
if(currentPage > 0) showPage(currentPage - 1);
});
pagination.appendChild(prevButton);
const nextButton=document.createElement("button");
nextButton.id="nextButtonMobile";
nextButton.textContent=">";
nextButton.className="nav-button";
nextButton.addEventListener("click", function (){
if(currentPage < pages.length - 1) showPage(currentPage + 1);
});
pagination.appendChild(nextButton);
updatePagination();
}
function updatePagination(){
const cardLinks=document.querySelectorAll("#locator-results-mobile-pagination .card-link, #locator-results-mobile-pagination .ellipsis");
cardLinks.forEach(link=> link.remove());
const totalPages=pages.length;
let startPage=Math.max(currentPage - 1, 0);
let endPage=Math.min(currentPage + 1, totalPages - 1);
if(currentPage - 1 < 0){
endPage=Math.min(maxVisiblePages - 1, totalPages - 1);
}
if(currentPage + 1 > totalPages - 1){
startPage=Math.max(totalPages - maxVisiblePages, 0);
}
if(startPage > 0){
addPageLink(0);
if(startPage > 1) addEllipsis();
}
for (let i=startPage; i <=endPage; i++){
addPageLink(i);
}
if(endPage < totalPages - 1){
if(endPage < totalPages - 2) addEllipsis();
addPageLink(totalPages - 1);
}
pagination.appendChild(document.getElementById("nextButtonMobile"));
}
function addPageLink(page){
const cardLink=document.createElement("button");
cardLink.textContent=page + 1;
cardLink.className="card-link";
cardLink.addEventListener("click", function (){
showPage(page);
});
pagination.insertBefore(cardLink, document.getElementById("nextButtonMobile"));
if(page===currentPage){
cardLink.classList.add("active");
}}
function addEllipsis(){
const ellipsis=document.createElement("span");
ellipsis.textContent="...";
ellipsis.className="ellipsis";
pagination.insertBefore(ellipsis, document.getElementById("nextButtonMobile"));
}
createPagination();
showPage(currentPage);
};