Carte Google Maps
#map {
height: 610px;
width: 100%;
border-radius: 10px;
}
var markers = [];
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 46.603354, lng: 1.888334 },
zoom: 6
});
// Ajouter les marqueurs
addMarker({ lat: 44.769, lng: 4.557 }, "Garage Dettori (07)");
addMarker({ lat: 46.163, lng: -1.098 }, "ALMO (17)");
addMarker({ lat: 47.803452529049714, lng: -3.583845929758924 }, "Atelier Vanstuff (29)");
addMarker({ lat: 43.715, lng: 1.449 }, "Neuvan (31)");
addMarker({ lat: 47.420, lng: 0.842 }, "Val de Brenne Auto (37)");
addMarker({ lat: 43.245, lng: 6.147 }, "Atelier Vanstuff (83)");
addMarker({ lat: 47.618, lng: -0.4543 }, "Anjou Van Équipement (49)");
addMarker({ lat: 46.067, lng: 6.470 }, "Van Society (74)");
addMarker({ lat: 43.3255468, lng: -0.5790334 }, "MK Loisir et Aménagement (64)");
addMarker({ lat: 50.738, lng: 3.132 }, "Oley Workshop (59)");
addMarker({ lat: 44.778, lng: -0.563 }, "Lukavan (33)");
// Lier l'événement de changement d'élément à la liste déroulante
document.querySelector('select[name="wapf[field_6569ac2371758]"]').addEventListener('change', function() {
var selectedLabel = this.options[this.selectedIndex].getAttribute('data-wapf-label');
var marker = markers.find(function(marker) {
return marker.label === selectedLabel;
});
if (marker) {
// Centrer la carte sur le marqueur sélectionné
map.setCenter(marker.getPosition());
map.setZoom(10);
// Mettre en évidence le marqueur sélectionné
markers.forEach(function(m) {
if (m === marker) {
m.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
} else {
m.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
});
}
});
}
function addMarker(location, label) {
var marker = new google.maps.Marker({
position: location,
map: map
});
marker.label = label;
markers.push(marker);
marker.addListener('click', function() {
var select = document.querySelector('select[name="wapf[field_6569ac2371758]"]');
var labelIndex = Array.from(select.options).findIndex(function(option) {
return option.getAttribute('data-wapf-label') === label;
});
if (labelIndex !== -1) {
select.selectedIndex = labelIndex;
select.dispatchEvent(new Event('change'));
}
});
var infowindow = new google.maps.InfoWindow({
content: label
});
marker.addListener('mouseover', function() {
infowindow.open(map, marker);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
}
// Autres scripts JavaScript ici...
document.addEventListener("DOMContentLoaded", function() {
var progressSteps = document.getElementsByClassName('wapf-progress-steps');
// Fonction pour vérifier l'état de la barre de progression
var checkProgress = function() {
// Vérifie si la barre de progression existe
if (progressSteps.length > 0) {
var thirdStep = progressSteps[0].children[3];
// Vérifie si la troisième étape a la classe "active"
if (thirdStep && thirdStep.classList.contains('active')) {
var productImage = document.getElementById("product-images");
var productMap = document.getElementById("product-map");
// Masque l'image du produit
if (productImage) {
productImage.style.display = "none";
}
// Affiche l'image de la carte
if (productMap) {
productMap.style.display = "block";
}
} else {
var productImage = document.getElementById("product-images");
var productMap = document.getElementById("product-map");
// Affiche l'image du produit
if (productImage) {
productImage.style.display = "block";
}
// Masque l'image de la carte
if (productMap) {
productMap.style.display = "none";
}
}
}
};
// Vérifie l'état de la barre de progression toutes les 2 secondes (ajustez l'intervalle selon vos besoins)
setInterval(checkProgress, 1000);
});
document.addEventListener("DOMContentLoaded", function() {
var sectionToHide = document.getElementById("popup-section");
sectionToHide.addEventListener("click", function() {
sectionToHide.style.display = "none"; // Masquer la section
});
});
document.addEventListener("DOMContentLoaded", function() {
// Écouter les clics sur le document
document.addEventListener('click', function(event) {
// Vérifier si l'élément cliqué est un bouton ".button.wapf_btn_next"
if (event.target.matches('.button.wapf_btn_next')) {
// Si c'est le cas, faire défiler vers le haut de la page avec un effet smooth
window.scrollTo({ top: 0, behavior: 'smooth' });
}
});
});
