[12/11/2025] Après CapBretagne, correction du problème de conflit Google Maps entre ColissimoPickupPoint et MondialRelay
This commit is contained in:
@@ -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,
|
||||
icon: "{image file='assets/img/maison.png' source='ColissimoPickupPoint'}"
|
||||
map: mapSOC.map/*,
|
||||
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();
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
icon: MRData.pinImages[idx],
|
||||
relay_id: item.id
|
||||
title: (idx + 1) + ' : ' + item.name
|
||||
});
|
||||
|
||||
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') {
|
||||
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(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,
|
||||
icon: "{image file='mondialrelay/assets/img/maison.png' source='MondialRelay'}"
|
||||
map: MRData.map/*,
|
||||
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'));
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user