FEATURE Optimizing behaviour

plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/view.js

@@ -14,7 +14,8 @@ const GOOGLE_MAPS_CONFIG = {
 		lat: 50.61036915386491,
 		lng: 4.151615298397132, // Position originale du pin
 		title: "Carhop",
-		// Options de couleur : 'red', 'blue', 'green', 'yellow', 'purple', 'orange'
+		address: "Av. de la Houssière 80, 7090 Braine-le-Comte",
+		placeId: "ChIJ41pZLUq1w0cRjXw8zlHnvXI", // Place ID Google Maps (à remplacer par le vrai)
 		color: "green",
 	},
 	styles: [
@@ -423,11 +424,48 @@ function initializeCarhopMaps() {
 			streetViewControl: false, // Contrôle Street View
 			fullscreenControl: false, // Bouton plein écran
 		});
+
+		// Créer une InfoWindow pour afficher les informations
+		const infoWindow = new google.maps.InfoWindow();
+
+		// Optionnel : Utiliser le Place ID pour obtenir les détails du lieu
+		const service = new google.maps.places.PlacesService(map);
+		const placeId = GOOGLE_MAPS_CONFIG.marker.placeId;
+		let placeDetails = null;
+
+		if (placeId && placeId !== "ChIJXXXXXXXXXXXXXXXXXXXX") {
+			service.getDetails(
+				{
+					placeId: placeId,
+					fields: [
+						"name",
+						"geometry",
+						"formatted_address",
+						"photos",
+						"rating",
+						"formatted_phone_number",
+						"website",
+						"opening_hours",
+					],
+				},
+				(place, status) => {
+					if (
+						status === google.maps.places.PlacesServiceStatus.OK &&
+						place.geometry
+					) {
+						// Centrer la carte sur le lieu exact
+						map.setCenter(place.geometry.location);
+						placeDetails = place;
+						console.log("Lieu trouvé:", place.name, place.formatted_address);
+					}
+				},
+			);
+		}
 		// Chemin vers votre pin personnalisé (à ajuster selon votre structure)
 		const image =
 			"/wp-content/plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/carhop-pin.png";
 		// Add marker with custom color
-		new google.maps.Marker({
+		const marker = new google.maps.Marker({
 			position: new google.maps.LatLng(
 				GOOGLE_MAPS_CONFIG.marker.lat,
 				GOOGLE_MAPS_CONFIG.marker.lng,
@@ -437,6 +475,68 @@ function initializeCarhopMaps() {
 			icon: image,
 		});
 
+		// Add click event to show InfoWindow
+		marker.addListener("click", function () {
+			let content = `<div style="max-width: 300px;">`;
+
+			if (placeDetails) {
+				// Utiliser les détails du lieu Google Maps
+				content += `<h3 style="margin: 0 0 10px 0; color: #136f63;">${
+					placeDetails.name || GOOGLE_MAPS_CONFIG.marker.title
+				}</h3>`;
+
+				if (placeDetails.formatted_address) {
+					content += `<p style="margin: 5px 0;"><strong>Adresse:</strong> ${placeDetails.formatted_address}</p>`;
+				}
+
+				if (placeDetails.formatted_phone_number) {
+					content += `<p style="margin: 5px 0;"><strong>Téléphone:</strong> ${placeDetails.formatted_phone_number}</p>`;
+				}
+
+				if (placeDetails.rating) {
+					content += `<p style="margin: 5px 0;"><strong>Note:</strong> ${placeDetails.rating}/5 ⭐</p>`;
+				}
+
+				if (placeDetails.website) {
+					content += `<p style="margin: 5px 0;"><a href="${placeDetails.website}" target="_blank" style="color: #136f63;">Site web</a></p>`;
+				}
+
+				// Bouton pour ouvrir dans Google Maps
+				content += `<div style="margin-top: 10px;">
+					<a href="https://www.google.com/maps/place/?q=place_id:${placeId}" target="_blank" 
+					   style="background: #136f63; color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; display: inline-block;">
+					   Voir sur Google Maps
+					</a>
+				</div>`;
+			} else {
+				// Fallback avec les informations de base
+				content += `<h3 style="margin: 0 0 10px 0; color: #136f63;">${GOOGLE_MAPS_CONFIG.marker.title}</h3>`;
+				content += `<p style="margin: 5px 0;"><strong>Adresse:</strong> ${GOOGLE_MAPS_CONFIG.marker.address}</p>`;
+
+				// Bouton pour ouvrir dans Google Maps
+				const address = encodeURIComponent(GOOGLE_MAPS_CONFIG.marker.address);
+				content += `<div style="margin-top: 10px;">
+					<a href="https://www.google.com/maps/search/?api=1&query=${address}" target="_blank" 
+					   style="background: #136f63; color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; display: inline-block;">
+					   Voir sur Google Maps
+					</a>
+				</div>`;
+			}
+
+			content += `</div>`;
+
+			infoWindow.setContent(content);
+			infoWindow.open(map, marker);
+		});
+
+		// Optionnel : Ouvrir automatiquement l'InfoWindow au chargement
+		// Décommentez les lignes suivantes si vous voulez ouvrir le popup automatiquement
+		/*
+		setTimeout(() => {
+			marker.trigger('click');
+		}, 1500); // Attendre 1.5 secondes après le chargement
+		*/
+
 		// Mark as initialized
 		mapElement.dataset.initialized = "true";
 	});
@@ -474,7 +574,7 @@ function loadGoogleMapsAPI() {
 
 	// 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.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_CONFIG.apiKey}&libraries=places&callback=carhopMapsReady`;
 	script.async = true;
 	script.defer = true;
 	document.head.appendChild(script);