diff --git a/plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/view.js b/plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/view.js index c25bbc5..06acf9f 100644 --- a/plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/view.js +++ b/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 = `
Adresse: ${placeDetails.formatted_address}
`; + } + + if (placeDetails.formatted_phone_number) { + content += `Téléphone: ${placeDetails.formatted_phone_number}
`; + } + + if (placeDetails.rating) { + content += `Note: ${placeDetails.rating}/5 ⭐
`; + } + + if (placeDetails.website) { + content += ``; + } + + // Bouton pour ouvrir dans Google Maps + content += ``; + } else { + // Fallback avec les informations de base + content += `Adresse: ${GOOGLE_MAPS_CONFIG.marker.address}
`; + + // Bouton pour ouvrir dans Google Maps + const address = encodeURIComponent(GOOGLE_MAPS_CONFIG.marker.address); + content += ``; + } + + content += `