FEATURE Updating styles and behaviour

plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-server-side-render'), 'version' => '222d888781be4eb372e6');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-server-side-render'), 'version' => '8cd612634bc9c89b25eb');

plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/index.js

@@ -108,7 +108,10 @@ const GOOGLE_MAPS_CONFIG = {
     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: [{
@@ -392,14 +395,40 @@ function initializeCarhopMaps() {
       // Contrôle Street View
       fullscreenControl: false // Bouton plein écran
     });
-    // Chemin vers votre pin personnalisé (à ajuster selon votre structure)
+    // Chemin vers votre pin personnalisé avec fallback
-    const image = "/wp-content/plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/carhop-pin.png";
+    const customPinPath = "/wp-content/plugins/carhop-blocks/blocks/localisation-map/src/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),
       map: map,
       title: GOOGLE_MAPS_CONFIG.marker.title,
-      icon: image
+      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

plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/render.php

@@ -8,6 +8,6 @@
 $unique_id = 'carhop-map-' . uniqid();
 ?>
 
-<div class="carhop-localisation-map" id="<?php echo esc_attr($unique_id); ?>">
+<section class="carhop-localisation-map alignfull" id="<?php echo esc_attr($unique_id); ?>">
 	<div class="map-container"></div>
-</div>
+</section>

plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/style-index-rtl.css

@@ -6,10 +6,9 @@
 }
 .carhop-localisation-map .map-container {
   margin: 0 auto;
-  width: 800px;
+  width: 1200px;
   height: 500px;
   background-color: var(--wp--preset--color--primary);
-  border-radius: 8px;
   overflow: hidden;
 }
 .carhop-localisation-map .map-container:not([data-initialized=true]) {

plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/style-index.css

@@ -6,10 +6,9 @@
 }
 .carhop-localisation-map .map-container {
   margin: 0 auto;
-  width: 800px;
+  width: 1200px;
   height: 500px;
   background-color: var(--wp--preset--color--primary);
-  border-radius: 8px;
   overflow: hidden;
 }
 .carhop-localisation-map .map-container:not([data-initialized=true]) {

plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/style-index.css.map

@@ -1 +1 @@
-{"version":3,"file":"localisation-map/style-index.css","mappings":";;;AAEE;EACC;AADH;AADC;EAIC;EACA;EACA;EACA;EACA;EACA;AAAF;AAGE;EACC;EACA;EACA;EACA;AADH;AAGG;EACC;AADJ,C","sources":["webpack://localisation-map/./src/localisation-map/style.scss"],"sourcesContent":[".carhop-localisation-map {\n\t.map-container {\n\t\ta:after {\n\t\t\tcontent: none !important;\n\t\t}\n\t\tmargin: 0 auto;\n\t\twidth: 800px;\n\t\theight: 500px;\n\t\tbackground-color: var(--wp--preset--color--primary);\n\t\tborder-radius: 8px;\n\t\toverflow: hidden;\n\n\t\t// Loading state\n\t\t&:not([data-initialized=\"true\"]) {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tcolor: white;\n\n\t\t\t&::before {\n\t\t\t\tcontent: \"Chargement de la carte...\";\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"localisation-map/style-index.css","mappings":";;;AAEE;EACC;AADH;AADC;EAIC;EACA;EACA;EACA;EACA;AAAF;AAGE;EACC;EACA;EACA;EACA;AADH;AAGG;EACC;AADJ,C","sources":["webpack://localisation-map/./src/localisation-map/style.scss"],"sourcesContent":[".carhop-localisation-map {\n\t.map-container {\n\t\ta:after {\n\t\t\tcontent: none !important;\n\t\t}\n\t\tmargin: 0 auto;\n\t\twidth: 1200px;\n\t\theight: 500px;\n\t\tbackground-color: var(--wp--preset--color--primary);\n\t\toverflow: hidden;\n\n\t\t// Loading state\n\t\t&:not([data-initialized=\"true\"]) {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tcolor: white;\n\n\t\t\t&::before {\n\t\t\t\tcontent: \"Chargement de la carte...\";\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}

plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '3b03e043d3968050b29f');
+<?php return array('dependencies' => array(), 'version' => 'd691e92672b49c2509ce');

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

@@ -19,7 +19,10 @@ const GOOGLE_MAPS_CONFIG = {
     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: [{
@@ -303,14 +306,40 @@ function initializeCarhopMaps() {
       // Contrôle Street View
       fullscreenControl: false // Bouton plein écran
     });
-    // Chemin vers votre pin personnalisé (à ajuster selon votre structure)
+    // Chemin vers votre pin personnalisé avec fallback
-    const image = "/wp-content/plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/carhop-pin.png";
+    const customPinPath = "/wp-content/plugins/carhop-blocks/blocks/localisation-map/src/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),
       map: map,
       title: GOOGLE_MAPS_CONFIG.marker.title,
-      icon: image
+      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

plugins/carhop-blocks/blocks/localisation-map/package.json

@@ -6,13 +6,14 @@
 	"license": "GPL-2.0-or-later",
 	"main": "build/index.js",
 	"scripts": {
-		"build": "wp-scripts build --blocks-manifest",
+		"build": "wp-scripts build --blocks-manifest && npm run copy-assets",
+		"copy-assets": "cp src/localisation-map/carhop-pin.png build/localisation-map/",
 		"format": "wp-scripts format",
 		"lint:css": "wp-scripts lint-style",
 		"lint:js": "wp-scripts lint-js",
 		"packages-update": "wp-scripts packages-update",
 		"plugin-zip": "wp-scripts plugin-zip",
-		"start": "wp-scripts start --blocks-manifest"
+		"start": "wp-scripts start --blocks-manifest && npm run copy-assets"
 	},
 	"devDependencies": {
 		"@wordpress/scripts": "^30.25.0"

plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/render.php

@@ -8,6 +8,6 @@
 $unique_id = 'carhop-map-' . uniqid();
 ?>
 
-<div class="carhop-localisation-map" id="<?php echo esc_attr($unique_id); ?>">
+<section class="carhop-localisation-map alignfull" id="<?php echo esc_attr($unique_id); ?>">
 	<div class="map-container"></div>
-</div>
+</section>

plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/style.scss

@@ -4,10 +4,9 @@
 			content: none !important;
 		}
 		margin: 0 auto;
-		width: 800px;
+		width: 1200px;
 		height: 500px;
 		background-color: var(--wp--preset--color--primary);
-		border-radius: 8px;
 		overflow: hidden;
 
 		// Loading state

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

@@ -16,6 +16,7 @@ const GOOGLE_MAPS_CONFIG = {
 		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: [
@@ -424,46 +425,10 @@ function initializeCarhopMaps() {
 			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";
 
-		// 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
 		const marker = new google.maps.Marker({
 			position: new google.maps.LatLng(
@@ -472,71 +437,33 @@ function initializeCarhopMaps() {
 			),
 			map: map,
 			title: GOOGLE_MAPS_CONFIG.marker.title,
-			icon: image,
+			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 show InfoWindow
+		// Add click event to open Google Maps place
 		marker.addListener("click", function () {
-			let content = `<div style="max-width: 300px;">`;
+			const placeId = GOOGLE_MAPS_CONFIG.marker.placeId;
 
-			if (placeDetails) {
+			// URL pour ouvrir la fiche Google Maps complète
-				// Utiliser les détails du lieu Google Maps
+			let googleMapsUrl;
-				content += `<h3 style="margin: 0 0 10px 0; color: #136f63;">${
+			if (placeId && placeId !== "ChIJXXXXXXXXXXXXXXXXXXXX") {
-					placeDetails.name || GOOGLE_MAPS_CONFIG.marker.title
+				// Utiliser le Place ID pour ouvrir la fiche complète
-				}</h3>`;
+				googleMapsUrl = `https://www.google.com/maps/place/?q=place_id:${placeId}`;
-
-				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
+				// Fallback avec l'adresse
-				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;">
+				googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${address}`;
-					<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>`;
+			// Ouvrir dans un nouvel onglet
-
+			window.open(googleMapsUrl, "_blank");
-			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";
 	});
@@ -574,7 +501,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}&libraries=places&callback=carhopMapsReady`;
+	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);