[12/11/2025] Après CapBretagne, correction du problème de conflit Google Maps entre ColissimoPickupPoint et MondialRelay

local/modules/ColissimoPickupPoint/templates/frontOffice/default/colissimo-pickup-point.html

@@ -54,7 +54,8 @@
                                     // Define MAP
                                     var mapOptions = {
                                         zoom: 13,
-                                        mapTypeId: google.maps.MapTypeId.ROADMAP
+                                        mapTypeId: google.maps.MapTypeId.ROADMAP,
+                                        mapId: "COLISSIMO_MAP_ID"
                                     }
                                     // On va créer la map dans la div qui a l'id relaymap
                                     mapSOC.map = new google.maps.Map(document.getElementById('colissimopickuppointmap'), mapOptions);
@@ -71,11 +72,12 @@
                                     if (status == google.maps.GeocoderStatus.OK) {
                                         // Et on centre la map sur cette position
                                         mapSOC.map.setCenter(results[0].geometry.location);
-                                        marker = new google.maps.Marker({
+                                        marker = new google.maps.marker.AdvancedMarkerElement({
                                             position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
-                                            map: mapSOC.map,
+                                            map: mapSOC.map/*,
-                                            icon: "{image file='assets/img/maison.png' source='ColissimoPickupPoint'}"
+                                            icon: "{image file='assets/img/maison.png' source='ColissimoPickupPoint'}"*/
                                         });
+
                                         if (mapSOC.position != null){
                                             mapSOC.position.setMap(null);
                                         }
@@ -145,10 +147,11 @@
                                         '</td>' +
                                         '</tr>';
 
-                                    marker = new google.maps.Marker({
+                                    marker = new google.maps.marker.AdvancedMarkerElement({
                                         position: new google.maps.LatLng(loc.lat, loc.lng),
-                                        map: mapSOC.map,
+                                        map: mapSOC.map/*,
                                         icon: mapSOC.images[loc.type]
+                                        */
                                     });
 
                                     mapSOC.listMarker.push(marker);
@@ -397,11 +400,8 @@
                                     </div>
                                 </div>
                             </div>
-
                             <!-- // Search city -->
-
                         </div>
-
                     </div>
                 </div>
                 {/ifloop}
@@ -412,20 +412,52 @@
 </tr>
 
 <script>
-    function loadScript() {
 
-        console.log("loadScript");
+    function loadScript() {
+        console.log("loadScript ColissimoPickupPoint");
+
+        if (window.ModulesGoogleMaps.loading) {
+            // Si déjà en cours de chargement, ajouter le callback
+            window.ModulesGoogleMaps.callbacks.push(ColissimoPickupPointInitialize);
+            return;
+        }
+
+        window.ModulesGoogleMaps.loading = true;
+
+        // Callback global qui sera appelé par Google Maps
+        window.ModulesGoogleMapsCallback = function() {
+            window.ModulesGoogleMaps.loaded = true;
+            window.ModulesGoogleMaps.loading = false;
+
+            // Exécuter tous les callbacks en attente
+            window.ModulesGoogleMaps.callbacks.forEach(function(callback) {
+                callback();
+            });
+            window.ModulesGoogleMaps.callbacks = [];
+        };
 
         var script = document.createElement('script');
         script.type = 'text/javascript';
+        script.defer = true;
         script.src = 'https://maps.googleapis.com/maps/api/js'
-        + '?callback=ColissimoPickupPointInitialize'
+            + '?callback=ModulesGoogleMapsCallback'
+            + '&libraries=marker'
             + '&key={colissimoPickupPointGoogleApiKey}';
         document.body.appendChild(script);
     }
 
-    if (typeof(google) == 'undefined') {
+    if (typeof(google) == 'undefined' || typeof(google.maps) == 'undefined') {
+        if (!window.ModulesGoogleMaps.loaded && !window.ModulesGoogleMaps.loading) {
+            // Ajouter le callback et charger le script
+            window.ModulesGoogleMaps.callbacks.push(ColissimoPickupPointInitialize);
             loadScript();
+            console.log('Colissimo : Maps pas encore déclarée');
+
+        } else if (window.ModulesGoogleMaps.loading) {
+            // Script en cours de chargement, ajouter juste le callback
+            window.ModulesGoogleMaps.callbacks.push(ColissimoPickupPointInitialize);
+            console.log('Colissimo : Maps déjà déclaré');
+        }
     } else {
         ColissimoPickupPointInitialize();
     }

local/modules/MondialRelay/templates/frontOffice/default/mondialrelay/order-delivery-extra.html

@@ -6,7 +6,7 @@
         {loop type="mondialrelay.delivery-price" name="home-prices" mode="home" country_id=$country state_id=$state}
         {$withHome = true}
         <div class="row">
-                <div class="col-sm-4">
+            <div class="col-sm-6">
                 <label for="mondialrelay_home">
                     {form name="thelia.order.delivery"}
                     {form_field field='delivery-module'}
@@ -23,7 +23,7 @@
                 </label>
             </div>
 
-                <div class="col-sm-4 hidden-xs text-center">
+            <div class="col-sm-2 hidden-xs text-center">
                 {loop type="image" name="deliveryspicture" source="module" source_id=$module_id force_return="true" width="100" height="72"}
                 <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
                 {/loop}
@@ -44,7 +44,7 @@
 
         {$withRelay = true}
         <div class="row">
-                <div class="col-sm-4">
+            <div class="col-sm-6">
                 <label for="mondialrelay_pickup">
                     {form name="thelia.order.delivery"}
                     {form_field field='delivery-module'}
@@ -61,7 +61,7 @@
                 </label>
             </div>
 
-                <div class="col-sm-4 hidden-xs text-center">
+            <div class="col-sm-2 hidden-xs text-center">
                 {loop type="image" name="deliveryspicture" source="module" source_id=$module_id force_return="true" width="100" height="72"}
                 <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
                 {/loop}
@@ -130,6 +130,7 @@
 </script>
 
 <script>
+
     $("#delivery-module-{$module_id}").html($('#mondialrelay_ui').html());
 
     jQuery.fn.scrollTo = function(elem, speed) {
@@ -139,7 +140,7 @@
         return this;
     };
 
-{if $withRelay}
+    {if $withRelay}
     var MRData = {
         markers: [],
         map: null,
@@ -153,12 +154,35 @@
     };
 
     function loadScript() {
+        console.log("loadScript ColissimoPickupPoint");
+
+        if (window.ModulesGoogleMaps.loading) {
+            // Si déjà en cours de chargement, ajouter le callback
+            window.ModulesGoogleMaps.callbacks.push(mondialRelaySetup);
+            return;
+        }
+
+        window.ModulesGoogleMaps.loading = true;
+
+        // Callback global qui sera appelé par Google Maps
+        window.ModulesGoogleMapsCallback = function() {
+            window.ModulesGoogleMaps.loaded = true;
+            window.ModulesGoogleMaps.loading = false;
+
+            // Exécuter tous les callbacks en attente
+            window.ModulesGoogleMaps.callbacks.forEach(function(callback) {
+                callback();
+            });
+            window.ModulesGoogleMaps.callbacks = [];
+        };
+
         var script = document.createElement('script');
         script.type = 'text/javascript';
+        script.defer = true;
         script.src = 'https://maps.googleapis.com/maps/api/js'
-            + '?callback=mondialRelaySetup'
+            + '?callback=ModulesGoogleMapsCallback'
+            + '&libraries=marker'
             + '&key={module_config module="MondialRelay" key="google_maps_api_key" locale="en_US"}';
-        script.async = true;
         document.body.appendChild(script);
     }
 
@@ -166,15 +190,12 @@
         var $relayInfo = $('#relay_info');
 
         MRData.bounds = new google.maps.LatLngBounds();
-
         for(var idx = 0; idx < MRData.markers.length; idx++) {
             MRData.markers[idx].setMap(null);
         }
 
         MRData.markers.length = 0;
-    
         $relayInfo.html('');
-    
         $.ajax({
             url: "{url path="MondialRelay/relay-map"}",
             data : {
@@ -198,19 +219,17 @@
                 for (var idx = 0; idx < data.points.length; idx++) {
                     item = data.points[idx];
 
-                        marker = new google.maps.Marker({
+                    marker = new google.maps.marker.AdvancedMarkerElement({
                         map: MRData.map,
                         position: new google.maps.LatLng(item.latitude, item.longitude),
-                            title: (idx + 1) + ' : ' + item.name,
+                        title: (idx + 1) + ' : ' + item.name
-                            icon: MRData.pinImages[idx],
-                            relay_id: item.id
                     });
 
                     google.maps.event.addListener(marker, 'click', function () {
                         $relayInfo.scrollTo("#pickup-point-" + this.relay_id);
                     });
 
-                        MRData.bounds.extend(marker.getPosition());
+                    MRData.bounds.extend(marker.position);
                     MRData.markers.push(marker);
 
                     html +=
@@ -230,30 +249,21 @@
                             opening = item.openings[jdx];
 
                             html += '<tr>';
-                
                             html += '<td class="day">' + opening.day + '</td> ';
-                
                             if (opening.opening_time_1 !== undefined) {
                                 html += '<td>' + opening.opening_time_1 + ' - ' + opening.closing_time_1 + '</td>';
                             }
-                
                             if (opening.opening_time_2 !== undefined) {
                                 html += '<td>' + opening.opening_time_2 + ' - ' + opening.closing_time_2 + '</td>';
                             }
-                
                             html += '</tr>';
                         }
-            
                         html += '</table>';
                     }
-        
                     html += '</td>';
-        
                     html += '<td><input type="radio" name="mondialrelay_relay" value="' + item.id + '"></td>';
-        
                     html += '</tr>';
                 }
-    
                 html += '</table>';
             }
 
@@ -268,9 +278,18 @@
     });
     }
 
-
+    if (typeof(google) == 'undefined' || typeof(google.maps) == 'undefined') {
-    if (typeof(google) === 'undefined') {
+        if (!window.ModulesGoogleMaps.loaded && !window.ModulesGoogleMaps.loading) {
+            // Ajouter le callback et charger le script
+            window.ModulesGoogleMaps.callbacks.push(mondialRelaySetup);
             loadScript();
+            console.log('MR : Maps pas encore déclarée');
+
+        } else if (window.ModulesGoogleMaps.loading) {
+            // Script en cours de chargement, ajouter juste le callback
+            window.ModulesGoogleMaps.callbacks.push(mondialRelaySetup);
+            console.log('MR : Maps déjà déclaré');
+        }
     } else {
         mondialRelaySetup();
     }
@@ -279,7 +298,8 @@
         // Google Map
         var MRData_mapOptions = {
             zoom: 13,
-                mapTypeId: google.maps.MapTypeId.ROADMAP
+            mapTypeId: google.maps.MapTypeId.ROADMAP,
+            mapId: "MONDIALRELAY_MAP_ID"
         };
 
         MRData.map = new google.maps.Map(document.getElementById('mondialrelay_map'), MRData_mapOptions);
@@ -293,10 +313,10 @@
         MRData.geocoder.geocode(MRDataAddress, function (results, status) {
             if (status === google.maps.GeocoderStatus.OK) {
                 MRData.map.setCenter(results[0].geometry.location);
-                    marker = new google.maps.Marker({
+                marker = new google.maps.marker.AdvancedMarkerElement({
                     position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
-                        map: MRData.map,
+                    map: MRData.map/*,
-                        icon: "{image file='mondialrelay/assets/img/maison.png' source='MondialRelay'}"
+                        icon: "{image file='mondialrelay/assets/img/maison.png' source='MondialRelay'}"*/
                 });
             } else {
                 // Sinon on met le centre de la map sur Clermont-Ferrand ;)
@@ -310,7 +330,6 @@
         {/loop}
 
             loadRelayMap();
-    
             $(document).on('click', '.pickup-point', function(ev) {
                 var pointId = $(this).data('pickup-id');
                 $('input[value='+pointId+']').prop("checked", true)
@@ -319,8 +338,8 @@
             $('#search-mr-relay').off().click(function(ev) {
                 loadRelayMap();
             });
-    
             $("#form-cart-delivery").off('submit').submit(function(ev) {
+
                 if ($('[data-mondial-relay-delivery-mode=pickup]').is(':checked')
                     &&
                     $('input[name=mondialrelay_relay]:checked').length === 0) {
@@ -329,7 +348,7 @@
                 }
             });
         }
-{/if}
+        {/if}
 
             $('[data-mondial-relay-delivery-mode]').change(function() {
                 $('input[name=mondial-relay-selected-delivery-mode]').val($(this).data('mondial-relay-delivery-mode'));

templates/frontOffice/lematelot/order-delivery.html

@@ -151,6 +151,15 @@
 
 {block name="javascript-initialization"}
 
+    <script>
+        // Namespace global pour gérer Google Maps entre modules
+        window.ModulesGoogleMaps = window.ModulesGoogleMaps || {
+            loaded: false,
+            loading: false,
+            callbacks: []
+        };
+    </script>
+
     <script type="text/javascript">
         jQuery(function($) {
             $('.js-change-delivery-address').change(function(e) {