399 lines
9.3 KiB
JavaScript
399 lines
9.3 KiB
JavaScript
/******/ (() => { // webpackBootstrap
|
|
/*!**************************************!*\
|
|
!*** ./src/localisation-map/view.js ***!
|
|
\**************************************/
|
|
/**
|
|
* Google Maps initialization for Carhop Localisation Map block
|
|
*/
|
|
|
|
// Configuration
|
|
const GOOGLE_MAPS_CONFIG = {
|
|
apiKey: "AIzaSyBs-owKPe4qiYLb2baCTAptLeNNJX7bTQk",
|
|
center: {
|
|
lat: 50.61036915572659,
|
|
lng: 4.148529499893204
|
|
},
|
|
zoom: 15,
|
|
marker: {
|
|
lat: 50.61036915386491,
|
|
lng: 4.151615298397132,
|
|
// Position originale du pin
|
|
title: "Carhop",
|
|
address: "Av. de la Houssière 80, 7090 Braine-le-Comte",
|
|
placeId: "ChIJ41pZLUq1w0cRjXw8zlHnvXI",
|
|
// Place ID Google Maps (à remplacer par le vrai)
|
|
|
|
color: "green"
|
|
},
|
|
styles: [{
|
|
featureType: "administrative",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#136f63"
|
|
}]
|
|
}, {
|
|
featureType: "administrative",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{
|
|
color: "#ffffff"
|
|
}, {
|
|
gamma: "1.00"
|
|
}, {
|
|
lightness: "0"
|
|
}, {
|
|
saturation: "0"
|
|
}, {
|
|
visibility: "on"
|
|
}, {
|
|
weight: "1.5"
|
|
}]
|
|
}, {
|
|
featureType: "administrative",
|
|
elementType: "labels.text.stroke",
|
|
stylers: [{
|
|
color: "#19464b"
|
|
}, {
|
|
weight: "2"
|
|
}]
|
|
}, {
|
|
featureType: "administrative.land_parcel",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#19464b"
|
|
}]
|
|
}, {
|
|
featureType: "landscape",
|
|
elementType: "all",
|
|
stylers: [{
|
|
color: "#19464b"
|
|
}]
|
|
}, {
|
|
featureType: "landscape",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#136f63"
|
|
}]
|
|
}, {
|
|
featureType: "landscape.man_made",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#136f63"
|
|
}]
|
|
}, {
|
|
featureType: "landscape.natural",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{
|
|
color: "#ffffff"
|
|
}, {
|
|
visibility: "on"
|
|
}]
|
|
}, {
|
|
featureType: "landscape.natural.landcover",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#136f63"
|
|
}]
|
|
}, {
|
|
featureType: "landscape.natural.terrain",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#136f63"
|
|
}]
|
|
}, {
|
|
featureType: "poi",
|
|
elementType: "all",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "poi.attraction",
|
|
elementType: "all",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "poi.business",
|
|
elementType: "all",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "poi.government",
|
|
elementType: "all",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "poi.park",
|
|
elementType: "all",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "poi.school",
|
|
elementType: "all",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "poi.medical",
|
|
elementType: "all",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "poi.place_of_worship",
|
|
elementType: "all",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "poi.sports_complex",
|
|
elementType: "all",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "road.highway",
|
|
elementType: "geometry.fill",
|
|
stylers: [{
|
|
color: "#136f63"
|
|
}, {
|
|
lightness: "-40"
|
|
}]
|
|
}, {
|
|
featureType: "road.highway",
|
|
elementType: "geometry.stroke",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "road.highway",
|
|
elementType: "labels",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "road.highway",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{
|
|
color: "#ffffff"
|
|
}]
|
|
}, {
|
|
featureType: "road.highway",
|
|
elementType: "labels.text.stroke",
|
|
stylers: [{
|
|
color: "#0a1f14"
|
|
}]
|
|
}, {
|
|
featureType: "road.arterial",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#136f63"
|
|
}, {
|
|
lightness: 30
|
|
}]
|
|
}, {
|
|
featureType: "road.arterial",
|
|
elementType: "geometry.fill",
|
|
stylers: [{
|
|
color: "#136f63"
|
|
}]
|
|
}, {
|
|
featureType: "road.arterial",
|
|
elementType: "labels",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}, {
|
|
featureType: "road.arterial",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{
|
|
color: "#ffffff"
|
|
}]
|
|
}, {
|
|
featureType: "road.arterial",
|
|
elementType: "labels.text.stroke",
|
|
stylers: [{
|
|
color: "#2c2c2c"
|
|
}]
|
|
}, {
|
|
featureType: "road.local",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#136F63"
|
|
}, {
|
|
lightness: -20
|
|
}]
|
|
}, {
|
|
featureType: "road.local",
|
|
elementType: "labels",
|
|
stylers: [{
|
|
visibility: "simplified"
|
|
}]
|
|
}, {
|
|
featureType: "road.local",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{
|
|
color: "#ffffff"
|
|
}]
|
|
}, {
|
|
featureType: "transit",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#136F63"
|
|
}, {
|
|
lightness: -20
|
|
}]
|
|
},
|
|
// Grandes masses d'eau (océans, lacs, grands fleuves)
|
|
{
|
|
featureType: "water",
|
|
elementType: "geometry",
|
|
stylers: [{
|
|
color: "#136F63"
|
|
}, {
|
|
lightness: 18
|
|
}, {
|
|
saturation: -50
|
|
}, {
|
|
visibility: "simplified" // Simplifie l'affichage
|
|
}]
|
|
}, {
|
|
featureType: "water",
|
|
elementType: "geometry.fill",
|
|
stylers: [{
|
|
visibility: "simplified"
|
|
}]
|
|
},
|
|
// Masquer les labels des petites rivières
|
|
{
|
|
featureType: "water",
|
|
elementType: "labels",
|
|
stylers: [{
|
|
visibility: "off"
|
|
}]
|
|
}]
|
|
};
|
|
|
|
/**
|
|
* Initialize Google Maps for all map containers on the page
|
|
*/
|
|
function initializeCarhopMaps() {
|
|
// Find all map containers
|
|
const mapContainers = document.querySelectorAll(".carhop-localisation-map");
|
|
mapContainers.forEach(container => {
|
|
const mapElement = container.querySelector(".map-container");
|
|
if (!mapElement || mapElement.dataset.initialized === "true") {
|
|
return;
|
|
}
|
|
|
|
// Create map
|
|
const map = new google.maps.Map(mapElement, {
|
|
zoom: GOOGLE_MAPS_CONFIG.zoom,
|
|
center: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.center.lat, GOOGLE_MAPS_CONFIG.center.lng),
|
|
styles: GOOGLE_MAPS_CONFIG.styles,
|
|
// Contrôles de zoom
|
|
zoomControl: true,
|
|
zoomControlOptions: {
|
|
position: google.maps.ControlPosition.RIGHT_TOP,
|
|
style: google.maps.ZoomControlStyle.DEFAULT
|
|
},
|
|
// Autres contrôles utiles
|
|
mapTypeControl: false,
|
|
// Masquer le sélecteur de type de carte
|
|
streetViewControl: false,
|
|
// Contrôle Street View
|
|
fullscreenControl: false // Bouton plein écran
|
|
});
|
|
// Chemin vers votre pin personnalisé avec fallback
|
|
const customPinPath = "/wp-content/plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/carhop-pin.png";
|
|
|
|
// Add marker with custom color
|
|
const marker = new google.maps.Marker({
|
|
position: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.marker.lat, GOOGLE_MAPS_CONFIG.marker.lng),
|
|
map: map,
|
|
title: GOOGLE_MAPS_CONFIG.marker.title,
|
|
icon: {
|
|
url: customPinPath,
|
|
scaledSize: new google.maps.Size(40, 40),
|
|
// Taille du pin
|
|
origin: new google.maps.Point(0, 0),
|
|
anchor: new google.maps.Point(20, 40) // Point d'ancrage (centre bas)
|
|
}
|
|
});
|
|
|
|
// Add click event to open Google Maps place
|
|
marker.addListener("click", function () {
|
|
const placeId = GOOGLE_MAPS_CONFIG.marker.placeId;
|
|
|
|
// URL pour ouvrir la fiche Google Maps complète
|
|
let googleMapsUrl;
|
|
if (placeId && placeId !== "ChIJXXXXXXXXXXXXXXXXXXXX") {
|
|
// Utiliser le Place ID pour ouvrir la fiche complète
|
|
googleMapsUrl = `https://www.google.com/maps/place/?q=place_id:${placeId}`;
|
|
} else {
|
|
// Fallback avec l'adresse
|
|
const address = encodeURIComponent(GOOGLE_MAPS_CONFIG.marker.address);
|
|
googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${address}`;
|
|
}
|
|
|
|
// Ouvrir dans un nouvel onglet
|
|
window.open(googleMapsUrl, "_blank");
|
|
});
|
|
|
|
// Mark as initialized
|
|
mapElement.dataset.initialized = "true";
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Load Google Maps API and initialize maps
|
|
*/
|
|
function loadGoogleMapsAPI() {
|
|
// Check if Google Maps is already loaded
|
|
if (typeof google !== "undefined" && google.maps) {
|
|
initializeCarhopMaps();
|
|
return;
|
|
}
|
|
|
|
// Check if script is already loading
|
|
if (window.carhopMapsLoading) {
|
|
window.carhopMapsCallbacks = window.carhopMapsCallbacks || [];
|
|
window.carhopMapsCallbacks.push(initializeCarhopMaps);
|
|
return;
|
|
}
|
|
|
|
// Mark as loading
|
|
window.carhopMapsLoading = true;
|
|
window.carhopMapsCallbacks = [initializeCarhopMaps];
|
|
|
|
// Create callback function
|
|
window.carhopMapsReady = function () {
|
|
window.carhopMapsLoading = false;
|
|
if (window.carhopMapsCallbacks) {
|
|
window.carhopMapsCallbacks.forEach(callback => callback());
|
|
window.carhopMapsCallbacks = [];
|
|
}
|
|
};
|
|
|
|
// Load Google Maps API
|
|
const script = document.createElement("script");
|
|
script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_CONFIG.apiKey}&callback=carhopMapsReady`;
|
|
script.async = true;
|
|
script.defer = true;
|
|
document.head.appendChild(script);
|
|
}
|
|
|
|
// Initialize when DOM is ready
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", loadGoogleMapsAPI);
|
|
} else {
|
|
loadGoogleMapsAPI();
|
|
}
|
|
|
|
// Also initialize on window load as fallback
|
|
window.addEventListener("load", loadGoogleMapsAPI);
|
|
/******/ })()
|
|
;
|
|
//# sourceMappingURL=view.js.map
|