1// JFP - 13/11/2017 - StoreLocator V3 2// JFP - 14/02/2020 - V1.2 - Prise en compte Viewport 3// EFO - 01/06/2021 - Filtrage par pays 4 5//-------------------------------------------------------------- 6//- Définitions Objets 7//-------------------------------------------------------------- 8 9var g_nAUCUN_ZOOM = -1; 10var sAdressRequested = ''; 11 12// Classe permettant de définir un element présent sur la carte (avec marker associé) 13var ElementMap = function () { 14 15 var that = this; 16 17 // Identifiant unique Point de vente 18 that.m_nId = 0; 19 20 // Position point de vente 21 that.m_fLatitude = 0.0; 22 that.m_fLongitude = 0.0; 23 24 // Contenu info bulle 25 that.m_sContenuInfoBulle = ''; 26 27 // Icone associée au point de vente sur la MAP 28 that.m_sIconePathAndName = ''; 29 30 // Infos Point de vente 31 that.m_sLabel = ''; 32 that.m_sAddress = ''; 33 that.m_sAddress2 = ''; 34 that.m_sCity = ''; 35 that.m_sPhone = ''; 36 that.m_sEmail = ''; 37 that.m_sUrl = ''; 38 that.m_sUrlLabel = ''; 39 40 // Reference vers le marker google map 41 that.m_oMarker = null; 42 43 // Indique si les infos PDV sont présentes dans le DOM 44 that.m_bIsInfoPdvInDOM = false; 45 46 // Indique si un element doit être affiché sur la MAP 47 that.isVisible = function (oGoogleMapAOX) { 48 49 if (that.m_oMarker == null || oGoogleMapAOX === undefined || oGoogleMapAOX.m_oMap == null) { 50 return false; 51 } 52 53 // Permet de restrindre au rectangle englobant de la carte 54 var bMarkerVisible = oGoogleMapAOX.m_oMap.getBounds().contains(that.m_oMarker.getPosition()); 55 56 return bMarkerVisible; 57 } 58 59 // Supprime le marker de la carte 60 that.clearMarker = function () { 61 if (that.m_oMarker != null) { 62 that.m_oMarker.setMap(null); 63 } 64 65 that.m_oMarker = null; 66 } 67 68 // Création du marker associé à l'element courant 69 that.createMarker = function (oGoogleMapAOX) { 70 71 if (!oGoogleMapAOX.isMap()) { 72 AOX_DEBUG("Erreur createMarker: Google map is not defined"); 73 return false; 74 } 75 76 var bResult = true; 77 78 try 79 { 80 var oPoint = new google.maps.LatLng(that.m_fLatitude, that.m_fLongitude) 81 82 var oMarker = new google.maps.Marker({ 83 map: oGoogleMapAOX.m_oMap, 84 icon: that.m_sIconePathAndName, 85 position: oPoint, 86 draggable: false, 87 title: that.m_sLabel 88 }); 89 90 oMarker.set("Id", that.m_nId); 91 92 google.maps.event.addListener(oMarker, "click", function (e) { 93 showInfoBulle(that.m_nId); 94 }); 95 96 that.m_oMarker = oMarker; 97 98 oGoogleMapAOX.addMarker(oMarker); 99 } 100 catch (e) {
101 AOX_DEBUG("Exception lors de la création d'un nouveau marker:" + e.message); 102 that.traceElt(); 103 bResult = false; 104 } 105 106 return bResult; 107 } 108 109 // Trace des infos associées à un element 110 that.traceElt = function () { 111 AOX_DEBUG(that); 112 } 113 114 // Retourne l'id unique permettant d'identifier l'element du DOM contenant les infos PDV 115 that.getIdItemInfoPdv = function () { 116 return "itemInfoPdv_" + that.m_nId; 117 } 118 119 // Ajout des infos Pdv au DOM 120 that.createInfoPdv = function () { 121 if (that.m_bIsInfoPdvInDOMInDOM === true) { 122 return false; 123 } 124 125 var $templateItemInfoPdv = jQueryObject('#templateItemInfoPdv .itemInfoPdv'), 126 $cntr_ListItemInfoPdv = jQueryObject('#cntr_ListItemInfoPdv'); 127 128 if ($templateItemInfoPdv.length === 0) { 129 AOX_DEBUG("Erreur templateItemInfoPdv is not defined"); 130 return false; 131 } 132 133 if ($cntr_ListItemInfoPdv.length === 0) { 134 AOX_DEBUG("Erreur cntr_ListItemInfoPdv is not defined"); 135 return false; 136 } 137 138 var $itemInfoPdv = $templateItemInfoPdv.clone(true, true); 139 140 // Mise à jour des infos associées au point de vente 141 $itemInfoPdv.find('.pdvName').text(that.m_sLabel); 142 $itemInfoPdv.find('.pdvAdress').text(that.m_sAddress); 143 $itemInfoPdv.find('.pdvCity').text(that.m_sCity); 144 $itemInfoPdv.find('.pdvPhone').text(that.m_sPhone); 145 146 if (that.m_sEmail !== "") { 147 $itemInfoPdv.find('.pdvMail').text(that.m_sEmail); 148 $itemInfoPdv.find('.pdvMailTo').attr('href', 'mailto:' + that.m_sEmail); 149 } 150 151 if (that.m_sUrl !== "") { 152 var sLinkPDV = that.m_sUrl; 153 154 if (!/^(?:http(s)?:\/\/)/gm.test(sLinkPDV)) { 155 sLinkPDV = 'http://' + sLinkPDV; 156 } 157 158 $itemInfoPdv.find('.pdvUrl').text(sLinkPDV); 159 $itemInfoPdv.find('.pdvUrl').attr('href', sLinkPDV); 160 } 161 else 162 { 163 $itemInfoPdv.find('.pdvUrl').hide(); 164 } 165 166 $itemInfoPdv.find('.pdvShowInfoBulle').attr('href', 'javascript:showInfoBulle(' + that.m_nId + ');'); 167 168 $itemInfoPdv.find('.pdvSelectUrl').attr('href', 'javascript:selectPosition(' + that.m_nId + ',' + that.m_fLatitude + ',' + that.m_fLongitude + ',' + 17 + ')'); 169 170 // Identifiant unique 171 $itemInfoPdv.attr('id', that.getIdItemInfoPdv()); 172 173 // Ajout au DOM 174 $itemInfoPdv.appendTo($cntr_ListItemInfoPdv); 175 176 that.m_bIsInfoPdvInDOM = true; 177 } 178} 179 180// Classe permettant de définir une liste contenant les elements présents sur la carte 181function ListeElementMap() { 182 183 var that = this; 184 185 that.m_tabElementMap = []; 186 187 that.m_oInfobulleVisible = null; 188 189 that.getCount = function () { return (that.m_tabElementMap.length); } 190 191 that.clear = function () 192 { 193 // Suppression infos pdv 194 var $cntr_ListItemInfoPdv = jQueryObject('#cntr_ListItemInfoPdv'); 195 $cntr_ListItemInfoPdv.empty(); 196 197 // Suppression elements 198 that.m_tabElementMap = []; 199 } 200 201 that.addElementMap = function (oElementMap) { 202 that.m_tabElementMap[that.m_tabElementMap.length] = oElementMap; 203 } 204 205 that.getElementMap = function (nNumElementMap) { 206 if ((nNumElementMap >= 0) && (nNumElementMap < that.getCount())) { 207 return (that.m_tabElementMap[nNumElementMap]); 208 } 209 return (null); 210 } 211 212 // Supprime l'ensemble des markers de la carte 213 that.clearMarkers = function () { 214 for (var nNumElt = 0; nNumElt < that.getCount() ; nNumElt++) { 215 var oElementMap = that.getElementMap(nNumElt); 216 217 if (oElementMap != null) { 218 oElementMap.clearMarker(); 219 } 220 } 221 } 222 223 // Recupere un element à partir de son identifiant 224 that.getElementMapFromId = function (nId) { 225 for (var nNumElt = 0; nNumElt < that.getCount() ; nNumElt++) { 226 var oElementMap = that.getElementMap(nNumElt); 227 228 if (oElementMap != null && (oElementMap.m_nId == nId )) { 229 return oElementMap; 230 } 231 } 232 return (null); 233 } 234 235 // Permet d'intégrer la liste récupérée via un appel Ajax 236 that.importList = function (oListeImport) { 237 238 AOX_DEBUG('-> Début import des éléments de la carte...[' + oListeImport.length + ']'); 239 240 var nNbCreated = 0; 241 242 // RAZ visible avant mise à jour 243 244 try 245 { 246 jQueryObject.each(oListeImport, function(i, objImport) { 247 248 var oElementMap = that.getElementMapFromId(objImport.m_nId); 249 250 // Import uniquement si il n'existe pas déjà 251 if (oElementMap == null) { 252 253 var oNewElementMap = new ElementMap();
254 255 oNewElementMap.m_nId = objImport.m_nId; 256 257 oNewElementMap.m_sLabel = objImport.m_sLabel; 258 oNewElementMap.m_sAddress = objImport.m_sAddress; 259 oNewElementMap.m_sAddress2 = objImport.m_sAddress2; 260 oNewElementMap.m_sCity = objImport.m_sCity; 261 oNewElementMap.m_sPhone = objImport.m_sPhone; 262 oNewElementMap.m_sEmail = objImport.m_sEmail; 263 264 oNewElementMap.m_sUrl = objImport.m_sUrl; 265 oNewElementMap.m_sUrlLabel = objImport.m_sUrlLabel; 266 267 oNewElementMap.m_fLatitude = objImport.m_fLatitude; 268 oNewElementMap.m_fLongitude = objImport.m_fLongitude; 269 270 oNewElementMap.m_sContenuInfoBulle = objImport.m_sContenuInfoBulle; 271 272 oNewElementMap.m_sIconePathAndName = objImport.m_sIconePathAndName; 273 274 that.addElementMap(oNewElementMap); 275 276 nNbCreated++; 277 } 278 }); 279 } 280 catch (e) { 281 AOX_DEBUG("Exception lors de l'import des éléments de la carte:" + e.message); 282 } 283 284 AOX_DEBUG('Fin import des éléments de la carte [' + nNbCreated + ']'); 285 } 286 287 // Ajout de l'ensemble des markers associés aux elements de la liste 288 that.addMarkers = function (oGoogleMapAOX) { 289 290 AOX_DEBUG('-> Début ajout des markers à la carte...[' + that.getCount() + ']'); 291 292 var nNbCreated = 0; 293 for (var nNumElt = 0; nNumElt < that.getCount() ; nNumElt++) { 294 var oElementMap = that.getElementMap(nNumElt); 295 296 if (oElementMap != null) { 297 298 // Uniquement si le Marker n'a pas déjà été créé 299 if (oElementMap.m_oMarker == null) { 300 if (oElementMap.createMarker(oGoogleMapAOX)) { 301 nNbCreated++; 302 } 303 } 304 } 305 } 306 307 AOX_DEBUG('Fin ajout des markers à la carte [' + nNbCreated + ']'); 308 } 309 310 // Permet d'afficher l'info bulle associée à un element de la carte 311 that.showInfoBulle = function (nId, oGoogleMapAOX) { 312 313 if (!oGoogleMapAOX.isMap()) { 314 AOX_DEBUG("Erreur showInfoBulle: Google map is not defined"); 315 return false; 316 } 317 318 var oSelectedElementMap = that.getElementMapFromId(nId); 319 320 if (oSelectedElementMap != null) { 321 322 //Fermeture infobulle précédente 323 if (that.m_oInfobulleVisible) { 324 that.m_oInfobulleVisible.close(); 325 } 326 327 var oMarker = oSelectedElementMap.m_oMarker; 328 var sContent = oSelectedElementMap.m_sContenuInfoBulle; 329 330 var oInfoBulle = new google.maps.InfoWindow({ 331 content: jQueryObject(sContent).get(0) 332 }); 333 334 oInfoBulle.open(oGoogleMapAOX.m_oMap, oMarker); 335 336 that.m_oInfobulleVisible = oInfoBulle; 337 338 return true; 339 } 340 else { 341 AOX_DEBUG('showInfoBulle / Unknown Id: [' + nId + ']'); 342 return false; 343 } 344 } 345 346 //Affichage des infos points de vente 347 that.showInfoPdv = function (oGoogleMapAOX) { 348 349 //On cache les infos associées aux PDV non affichés sur la carte 350 for (var nNumElt = 0; nNumElt < that.getCount() ; nNumElt++) { 351 var oElementMap = that.getElementMap(nNumElt); 352 353 if ((oElementMap != null) && (oElementMap.isVisible(oGoogleMapAOX) === false) && (oElementMap.m_bIsInfoPdvInDOM === true)) { 354 jQueryObject('#' + oElementMap.getIdItemInfoPdv()).hide(); 355 } 356 357 if ((oElementMap != null) && (oElementMap.isVisible(oGoogleMapAOX) === true) && (oElementMap.m_bIsInfoPdvInDOM === true)) { 358 jQueryObject('#' + oElementMap.getIdItemInfoPdv()).show(); 359 } 360 } 361 362 //On affiche les nouveaux 363 for (var nNumElt = 0; nNumElt < that.getCount() ; nNumElt++) { 364 var oElementMap = that.getElementMap(nNumElt); 365 366 if ((oElementMap != null) && (oElementMap.isVisible(oGoogleMapAOX) === true) && (oElementMap.m_bIsInfoPdvInDOM === false)) { 367 oElementMap.createInfoPdv(oGoogleMapAOX); 368 } 369 } 370 371 //On met à jour le nombre d'infos pdv 372 var nNbItemInfoPdv = 0; 373 374 for (var nNumElt = 0; nNumElt < that.getCount() ; nNumElt++) { 375 var oElementMap = that.getElementMap(nNumElt); 376 377 if ((oElementMap != null) && (oElementMap.isVisible(oGoogleMapAOX) === true) && (oElementMap.m_bIsInfoPdvInDOM === true)) { 378 nNbItemInfoPdv++; 379 } 380 } 381 382 var sNbItemInfoPdv = g_sResultPageStoreLocator + " (" + nNbItemInfoPdv + ")"; 383 jQueryObject('#nbItemInfoPdv').text(sNbItemInfoPdv); 384 385 //On recalcul le scroll 386 jQueryObject('.jQueryScroll').jScrollPane(); 387 388 if (typeof trackCDOEventGA4_StoreLocator === 'function') 389 trackCDOEventGA4_StoreLocator(sAdressRequested, nNbItemInfoPdv); 390 391 392 } 393} 394 395// Classe associée à l'objet GoogleMap 396var GoogleMapAOX = function () { 397 398 var that = this; 399 400 // GoogleMap 401 that.m_oMap = null; 402 that.m_oBoundaries = null; 403 404 // Cluster permettant de regrouper les markers lorsque leur nombre est trop important 405 that.m_oMarkerClusterer = null; 406 407 // Liste des elements présents sur la carte (+marker) 408 var m_oListeElementMap = new ListeElementMap();
409 410 // Distances 411 that.m_sMeasureUnit = null; 412 that.m_nEarthRadius = null; 413 414 // Request 415 that.m_oCurrentXHRSalepointListFromPosition = null; 416 417 // Google Map chargée 418 that.isMap = function () { 419 return (that.m_oMap != null); 420 } 421 422 // Style markers 423 // textColor: 'white', 424 // url: '../../include/images/cluster_small.png', 425 // height: 50, 426 // width: 50 427 var clusterStyles = [ 428 { 429 url: '../../include/images/cluster_small.png', 430 height: 53, 431 width: 52, 432 anchor: [0, 0] 433 }, 434 { 435 url: '../../include/images/cluster_medium.png', 436 height: 56, 437 width: 55, 438 anchor: [0, 0] 439 }, 440 { 441 url: '../../include/images/cluster_large.png', 442 height: 66, 443 width: 65, 444 anchor: [0, 0] 445 } 446 ]; 447 448 // Regroupement des markers 449 //'imagePath': 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' 450 that.initMarkerClusterer = function () { 451 var mcOptions = { 452 'maxZoom': 15, 453 'styles': clusterStyles 454 }; 455 456 that.m_oMarkerClusterer = new MarkerClusterer(that.m_oMap, [], mcOptions); 457 } 458 459 // Initialisation de l'objet 460 that.initialize = function (sMapEltId) { 461 462 var $MapGoogle = jQueryObject("#" + sMapEltId); 463 464 if ($MapGoogle.length == 0) { 465 AOX_DEBUG('Google Maps not found...'); 466 return false; 467 } 468 469 AOX_DEBUG('Initialize Google Maps...'); 470 471 if (g_bIsMetricSystem) { 472 that.m_nEarthRadius = 6371; 473 that.m_sMeasureUnit = "km"; 474 } else { 475 that.m_nEarthRadius = 3959; 476 that.m_sMeasureUnit = "mile"; 477 } 478 479 var bMapTypeControl = true; // Affiche ou non le choix du type de carte 480 var oMapTypeControlOptions = { 481 mapTypeIds: [google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeIdTERRAIN] //rayez la mention inutile https://developers.google.com/maps/documentation/javascript/reference#MapTypeId 482 , position: google.maps.ControlPosition.TOP_RIGHT //Au choix BOTTOM_CENTER / BOTTOM_LEFT / BOTTOM_RIGHT / LEFT_BOTTOM / LEFT_CENTER / LEFT_TOP / RIGHT_BOTTOM / RIGHT_CENTER / RIGHT_TOP / TOP_CENTER / TOP_LEFT / TOP_RIGHT -> https://developers.google.com/maps/documentation/javascript/reference#ControlPosition 483 , style: google.maps.MapTypeControlStyle.DEFAULT//Au choix DEFAULT / DROPDOWN_MENU / HORIZONTAL_BAR -> https://developers.google.com/maps/documentation/javascript/reference#MapTypeControlStyle 484 } 485 486 //Affichage défaut carte 487 var eMapTypeId = google.maps.MapTypeId.ROADMAP; 488 489 //overviewMapControl -> je ne sais pas sur quoi ça agit !!! :D 490 var bOverviewMapControl = false; //true/false 491 var oOverviewMapControlOptions = { 492 opened: false //true/false https://developers.google.com/maps/documentation/javascript/reference#OverviewMapControlOptions 493 } 494 495 //panControl -> controle drag manuel carte 496 var bPanControl = false; 497 var oPanControlOptions = { 498 position: google.maps.ControlPosition.BOTTOM_RIGHT//Cf controlPosition 499 } 500 501 //Zoom manuel 502 var bScrollwheelZoom = $MapGoogle.closest('.ctn_storelocator-module').length > 0 ? false : true; //désactivation glissement carte en mode module 503 //Zoom 504 var bZoomControl = true; 505 var eZoomControlPosition = google.maps.ControlPosition.LEFT_BOTTOM; 506 if (jQueryObject('html').hasClass('mobile')) { 507 eZoomControlPosition = google.maps.ControlPosition.RIGHT_TOP; 508 } else if ($MapGoogle.closest('.ctn_storelocator-module').length > 0) { 509 eZoomControlPosition = google.maps.ControlPosition.RIGHT_BOTTOM; 510 } 511 var oZoomControlOptions = { //->https://developers.google.com/maps/documentation/javascript/reference#ZoomControlOptions 512 position: eZoomControlPosition//Cf controlPosition 513 , style: google.maps.ZoomControlStyle.DEFAULT //Au choix DEFAULT / LARGE / SMALL 514 } 515 516 var bScaleControl = false;//Affiche masque échelle (je suppose...) 517 518 var bStreetViewControl = false;//Affiche/masque pegman ! 519 var oStreetViewControlOptions = { 520 position: google.maps.ControlPosition.TOP_LEFT//Cf controlPosition et/ou doc https://developers.google.com/maps/documentation/javascript/reference#StreetViewControlOptions 521 } 522 523 var optionsGoogleMap = { 524 mapTypeId: google.maps.MapTypeId.ROADMAP 525 , zoomControl: bZoomControl 526 , zoomControlOptions: oZoomControlOptions 527 528 , mapTypeControl: bMapTypeControl 529 , mapTypeControlOptions: oMapTypeControlOptions 530 , mapTypeId: eMapTypeId 531 , scaleControl: bScaleControl 532 533 , streetViewControl: bStreetViewControl 534 , streetViewControlOptions: oStreetViewControlOptions 535 536 , overviewMapControl: bOverviewMapControl 537 , overviewMapControlOptions: oOverviewMapControlOptions 538 539 , panControl: bPanControl 540 , panControlOptions: oPanControlOptions 541 542 , scrollwheel: bScrollwheelZoom 543 }; 544 545 // Selection de la position par défaut 546 optionsGoogleMap = selectDefaultPosition(optionsGoogleMap); 547 548 that.m_oMap = new google.maps.Map($MapGoogle.get(0), optionsGoogleMap); 549 550 //Mise à jour dynamique des markers (zoom + move map) 551 google.maps.event.addListener(that.m_oMap, 'idle', eventMapChange); 552 553 //Regroupement des markers 554 that.initMarkerClusterer(); 555 556 return true; 557 } 558 559 // Supprime l'ensemble des markers de la carte 560 that.clearMarkers = function () { 561 562 // Annulation requête de mise à jour si déjà en cours 563 that.abortXHRSalepointListFromPosition(); 564 565 // Suppression des markers de la carte 566 m_oListeElementMap.clearMarkers(); 567 568 // Suppression des elements associés 569 m_oListeElementMap.clear(); 570 571 // Suppression regroupement markers 572 that.m_oMarkerClusterer.clearMarkers(); 573 } 574 575 //Affiche la position donnée sur la carte 576 that.showPosition = function (fLatitude, fLongitude, oViewport) { 577 578 if (that.isMap()) { 579 // -- Map disponible -- 580 581 if (typeof oViewport !== "undefined") { 582 // Only geocodes have viewport 583 //Set the bounds to the map's viewport. 584 that.setMapViewport(oViewport); 585 } 586 else 587 { 588 //Definition des limites de la zone à afficher 589 //-> Declenche automatiquement un evenement qui met à jour les markers 590 return that.setMapBoundaries(fLatitude, fLongitude); 591 } 592 } 593 else { 594 AOX_DEBUG("Erreur showPosition: Google map is not defined"); 595 return false; 596 } 597 } 598 599 //Definition des limites de la zone à afficher 600 //-> Declenche automatiquement un evenement qui met à jour les markers 601 that.setMapBoundaries = function (fLatitude, fLongitude) { 602 603 if (!that.isMap()) { 604 AOX_DEBUG("Erreur setMapBoundaries: Google map is not defined"); 605 return false; 606 } 607 608 try { 609 var ne = new google.maps.LatLng(fLatitude + .01, fLongitude + .01);
610 var sw = new google.maps.LatLng(fLatitude - .01, fLongitude - .01); 611 612 var oBoundaries = new google.maps.LatLngBounds(sw, ne); 613 614 that.m_oMap.fitBounds(oBoundaries); 615 616 return true; 617 } 618 catch (e) { 619 AOX_DEBUG("Exception update map boundaries:" + e.message); 620 return false; 621 } 622 } 623 624 //Set the bounds to the map's viewport 625 //-> Declenche automatiquement un evenement qui met à jour les markers 626 that.setMapViewport = function (oViewport) { 627 628 if (!that.isMap()) { 629 AOX_DEBUG("Erreur setMapViewport: Google map is not defined"); 630 return false; 631 } 632 633 try { 634 that.m_oMap.fitBounds(oViewport); 635 636 return true; 637 } 638 catch (e) { 639 AOX_DEBUG("Exception update map boundaries:" + e.message); 640 return false; 641 } 642 } 643 644 //Permet de récupérer les infos sur la carte afficher 645 that.showInfos = function () { 646 647 var oCenter = that.getCenter(); 648 649 if (oCenter != null) { 650 AOX_DEBUG("Center Latitude: " + oCenter.lat()); 651 AOX_DEBUG("Center Longitude: " + oCenter.lng()); 652 } 653 654 var nZoom = that.getZoom(); 655 656 AOX_DEBUG("Zoom: " + nZoom); 657 658 var fDistanceMax = that.getDistanceMax(); 659 AOX_DEBUG("Distance: " + fDistanceMax + " " + that.m_sMeasureUnit); 660 661 AOX_DEBUG("Url: " + getUrlPageStoreLocator(oCenter.lat(), oCenter.lng(), nZoom)); 662 } 663 664 //Permet de calculer la distance max des differents salepoints autour de la position centrale 665 that.getDistanceMax = function () { 666 667 fDistanceMax = 0; 668 669 try 670 { 671 // Calcul dimension diagonale carte 672 var fLat0 = that.m_oMap.getBounds().getNorthEast().lat(); 673 var fLng0 = that.m_oMap.getBounds().getNorthEast().lng();
674 var fLat1 = that.m_oMap.getBounds().getSouthWest().lat(); 675 var fLng1 = that.m_oMap.getBounds().getSouthWest().lng(); 676 677 fDistanceMax = getDistance(fLat0, fLng0, fLat1, fLng1, "K") / 2; 678 } 679 catch (e) { 680 AOX_DEBUG("Exception getDistanceMax:" + e.message); 681 fDistanceMax = 0; 682 } 683 684 return fDistanceMax; 685 } 686 687 //Permet d'importer une nouvelle liste de markers à positionner sur la carte 688 that.importMarkers = function (oListEltCarte) { 689 m_oListeElementMap.importList(oListEltCarte); 690 691 m_oListeElementMap.addMarkers(that); 692 } 693 694 //Affichage des infos points de vente 695 that.showInfoPdv = function (oGoogleMapAOX) { 696 m_oListeElementMap.showInfoPdv(oGoogleMapAOX); 697 } 698 699 //Ajout d'un marker à la carte 700 that.addMarker = function (oMarker) { 701 if (oMarker.getVisible()) { 702 that.m_oMarkerClusterer.addMarker(oMarker, false); 703 } 704 } 705 706 // Retourne le zoom de la carte 707 that.getZoom = function () { 708 709 if (!that.isMap()) { 710 AOX_DEBUG("Erreur getCenter: Google map is not defined"); 711 return -1; 712 } 713 714 return that.m_oMap.getZoom(); 715 } 716 717 // Retourne la position du centre de la carte 718 that.getCenter = function () { 719 720 if (!that.isMap()) { 721 AOX_DEBUG("Erreur getCenter: Google map is not defined"); 722 return null; 723 } 724 725 var oCenter = null; 726 727 try 728 { 729 var oBounds = that.m_oMap.getBounds(); 730 731 if (oBounds != null) { 732 oCenter = that.m_oMap.getBounds().getCenter(); 733 } 734 } 735 catch (e) { 736 AOX_DEBUG("Exception lors de la récupération du centre de la carte:" + e.message); 737 } 738 739 return oCenter; 740 } 741 742 // Stop requête AJAX de mise à jour des salepoints 743 that.abortXHRSalepointListFromPosition = function () { 744 if (that.m_oCurrentXHRSalepointListFromPosition != null) { 745 that.m_oCurrentXHRSalepointListFromPosition.abort(); 746 } 747 } 748 749 // Recupere l'ensemble des PDVs autour d'une position donnée 750 that.updateSalePointListFromPosition = function () { 751 752 var oCenter = that.getCenter(); 753 754 if (oCenter == null) { 755 return; 756 } 757 758 var fLocationCenterLat = oCenter.lat(); 759 var fLocationCenterLng = oCenter.lng(); 760 761 var oParam = { 762 sServiceName: "ServiceCMS_Storelocator_SalepointListFromPosition", 763 fPositionLat: fLocationCenterLat, 764 fPositionLng: fLocationCenterLng, 765 nSalepointListId: g_sSalepointListId, 766 sSalepointListAppCode: g_sSalepointListAppCode, 767 sSalePointTypeAppCode: ((typeof g_sCurrentSalePointType !== "undefined") ? g_sCurrentSalePointType : ''), 768 bExclusionFilter: ((typeof g_bExclusionFilter !== "undefined") ? g_bExclusionFilter : false), 769 bCheckProfessional: ((typeof g_bCheckProfessional !== "undefined") ? g_bCheckProfessional : false), 770 bIsProfessional: ((typeof g_bIsProfessional !== "undefined") ? g_bIsProfessional : false) 771 }; 772 773 var strAttributes = ""; 774 strAttributes += "<Service ServiceName='" + oParam['sServiceName'] + "'>"; 775 for (var property in oParam) { 776 try { 777 if (typeof oParam[property] != 'function' && typeof oParam[property] != 'object') { 778 strAttributes += "<ServiceParam ServiceParamName='" + property + "'>" + encodeURIComponent(oParam[property]) + "</ServiceParam>"; 779 } 780 } catch (e) { 781 782 } 783 } 784 785 var fDistanceMax = that.getDistanceMax(); 786 if (fDistanceMax > 0) { 787 strAttributes += " <ServiceParam ServiceParamName='fDistanceMax'>" + fDistanceMax + "</ServiceParam>"; 788 } 789 790 strAttributes += " <ServiceParam ServiceParamName='AdminActionResultMode'>1</ServiceParam>"; 791 792 strAttributes += "</Service>"; 793 794 var sServicePageUrl = AOXJsManager.getAdminActionUrl(); 795 796 that.abortXHRSalepointListFromPosition(); 797 798 AOX_DEBUG("-> Start Get From DataBase... [" + fLocationCenterLat + "/" + fLocationCenterLng + "][Distance:" + fDistanceMax + " " + g_oGoogleMap.m_sMeasureUnit + "][Filtre Id:" + g_sSalepointListId + "]"); 799 800 that.m_oCurrentXHRSalepointListFromPosition = jQueryObject.post(sServicePageUrl, { ServiceRequestMode: 1, ServicesXML: escape(strAttributes) }, function (oData) { 801 802 that.m_oCurrentXHRSalepointListFromPosition = null; 803 804 if (jQueryObject(oData).children('AjaxXmlResult').length > 0) { 805 var oXMLResult = jQueryObject(oData).children('AjaxXmlResult:first'); 806 var eServiceResult = jQueryObject(oXMLResult).find("ServiceResult"); 807 808 if (eServiceResult.attr('eServiceResult') == 'success') { 809 var oTextResult = eServiceResult.find('TextResult').first(); 810 811 var sResultJson = jQueryObject(oTextResult).text(); 812 813 try { 814 var oResultJson = JSON.parse(sResultJson) 815 816 AOX_DEBUG("End Get From DataBase"); 817 818 // Affichage des markers sur la carte 819 that.importMarkers(oResultJson.m_oListEltCarte); 820 821 // Affichage des infos points de vente associées 822 that.showInfoPdv(that); 823 824 jQueryObject('#cntr_ListItemInfoPdv .itemInfoPdv').on('click', function () { 825 826 var oItemInfoPdv = jQueryObject(this); 827 828 if (typeof dataLayer != 'undefined') { 829 dataLayer.push({ 830 'event': 'uaEvent', 831 'eventCategory': 'store locator', 832 'eventAction': oItemInfoPdv.find('.pdvName').html(), 833 'eventLabel': 'see_more_details' 834 });
835 } 836 837 }); 838 839 } 840 catch (e) { 841 AOX_DEBUG("Exception lors de la récupération des markers à partir d'une position:" + e.message); 842 } 843 844 } else if (eServiceResult.attr('eServiceResult') == 'failed') { 845 AOX_DEBUG("Erreur lors de la récupération des markers à partir d'une position"); 846 } else { 847 //Failed 848 } 849 } 850 }); 851 } 852 853 // Permet d'afficher l'info bulle associée à un element de la carte 854 that.showInfoBulle = function (nId) { 855 m_oListeElementMap.showInfoBulle(nId, that); 856 } 857} 858 859// Classe associée à l'objet AutoComplete 860var GooglePlaceAOX = function () { 861 862 var that = this; 863 864 // Place AutoComplete 865 that.m_oAutoComplete = null; 866 867 // GoogleMapAOX associée 868 that.m_oGoogleMapAOX = null; 869 870 // Initialisation du champ Google Autocomplete 871 // sAutocompleteEltId: Identifiant element INPUT associé au champ 872 that.initialize = function (sAutocompleteEltId, oGoogleMap) { 873 874 that.m_oGoogleMapAOX = oGoogleMap; 875 876 var $eltAutoComplete = jQueryObject("#" + sAutocompleteEltId); 877 if ($eltAutoComplete.length != 0) { 878 AOX_DEBUG('Initialize Google Place Autocomplete...'); 879 880 var sTypes = 'geocode'; 881 882 if (typeof g_oGooglePlaceAOX_Types != 'undefined') { 883 sTypes = g_oGooglePlaceAOX_Types; 884 } 885 var oOptionsAutocomplete = { 886 types: [sTypes] 887 }; 888 889 that.m_oAutoComplete = new google.maps.places.Autocomplete($eltAutoComplete[0], oOptionsAutocomplete); 890 891 // EFO - 01/06/2021 - Filtrage par pays 892 893 // Permet de limiter les recherches à un (ou des) territoires via leurs codes ISO : https://fr.wikipedia.org/wiki/ISO_3166-1 894 // Exemple : g_oGooglePlaceAOX_ComponentRestrictions = {'country': ['us', 'pr', 'vi', 'gu', 'mp']}; 895 if (typeof g_oGooglePlaceAOX_ComponentRestrictions != 'undefined') { 896 if (typeof g_oGooglePlaceAOX_ComponentRestrictions == 'object') { 897 that.m_oAutoComplete.setComponentRestrictions(g_oGooglePlaceAOX_ComponentRestrictions); 898 } 899 } 900 901 google.maps.event.addListener(that.m_oAutoComplete, 'place_changed', onPlaceChanged); 902 903 return true; 904 } 905 else { 906 AOX_DEBUG('Google Place Autocomplete not found...'); 907 return false; 908 } 909 } 910 911 // Affichage de la position sur la carte si disponible sinon redirection vers la page StoreLocator 912 that.showPosition = function (fLatitude, fLongitude, oViewport) { 913 914 if (that.m_oGoogleMapAOX.isMap()) { 915 // -- Map disponible -- 916 return that.m_oGoogleMapAOX.showPosition(fLatitude, fLongitude, oViewport); 917 } 918 else { 919 // -- Map non disponible -- 920 921 // Redirection page storeLocator 922 return that.redirectPageStoreLocator(fLatitude, fLongitude, g_nAUCUN_ZOOM);
923 } 924 } 925 926 // Redirection vers page StoreLocator 927 that.redirectPageStoreLocator = function (fLatitude, fLongitude, nZoom) { 928 929 var sUrlPageStoreLocator = getUrlPageStoreLocator(fLatitude, fLongitude, nZoom); 930 931 if (sUrlPageStoreLocator != "") { 932 window.open(sURL, '_self'); 933 } 934 } 935} 936 937//-------------------------------------------------------------- 938//- Déclaration variables globales 939//-------------------------------------------------------------- 940 941//GoogleMapAOX 942var g_oGoogleMap = new GoogleMapAOX(); 943 944//Gestion affichage des distances 945var g_bIsMetricSystem; //Affichage Miles / ou Kms 946 947//Option de filtrage des salepoints par operation 948var g_sSalepointListId = ""; 949var g_sSalepointListAppCode = ""; 950 951//Position par défaut 952var g_sDefaultPositionLat = ""; 953var g_sDefaultPositionLng = ""; 954 955//Zoom par défaut 956var g_sDefaultZoom = ""; 957 958//GooglePlaceAOX 959var g_oGooglePlace = new GooglePlaceAOX(); 960 961//-------------------------------------------------------------- 962//- Initialisation module 963//-------------------------------------------------------------- 964 965function initialize_GoogleMap_afterApiReady() { 966 jQueryObject(document).ready(function () { 967 968 // Initialisation GoogleMap après chargement API Google 969 g_oGoogleMap.initialize('mapGoogle'); 970 971 // Initialisation du champ Google Autocomplete 972 g_oGooglePlace.initialize('user_input_autocomplete_address', g_oGoogleMap); 973 }); 974} 975 976// Event en cas de modification de la carte (zoom/move) 977function eventMapChange() { 978 AOX_DEBUG('-> Google Map has changed...'); 979 g_oGoogleMap.updateSalePointListFromPosition(); 980} 981 982//Permet de récupérer les infos sur la carte afficher 983function showInfos() { 984 g_oGoogleMap.showInfos(); 985} 986 987//-------------------------------------------------------------- 988//- Filtrage des salepoints par operation 989//-------------------------------------------------------------- 990 991function SelectSalePointListId(sSalepointListId) { 992 993 var nSalepointListId = parseInt(sSalepointListId); 994 995 if (!isNaN(nSalepointListId)) { 996 if (nSalepointListId != g_sSalepointListId) { 997 AOX_DEBUG('Select SalePointListId [' + nSalepointListId + ']'); 998 g_sSalepointListId = nSalepointListId; 999 g_sSalepointListAppCode = ""; 1000 1001 // Suppression de l'ensemble des markers de la carte 1002 g_oGoogleMap.clearMarkers(); 1003 1004 // Mise à jour de la carte en fonction du nouveau filtrage 1005 g_oGoogleMap.updateSalePointListFromPosition(); 1006 } 1007 } 1008 else { 1009 AOX_DEBUG('Erreur SalePointListId not an integer [' + sSalepointListId + ']'); 1010 } 1011} 1012 1013//-------------------------------------------------------------- 1014//- InfoBulle 1015//-------------------------------------------------------------- 1016 1017//Appel de l'instanciation d'une bulle à partir de l'id du marker 1018function showInfoBulle(nId) { 1019 g_oGoogleMap.showInfoBulle(nId); 1020} 1021 1022//-------------------------------------------------------------- 1023//- Module Place Autocomplete 1024//-------------------------------------------------------------- 1025 1026// Fonction appelée automatiquement lorsqu'une nouvelle position est sélectionnée 1027function onPlaceChanged() { 1028 var oPlace = this.getPlace(); 1029 1030 if (!oPlace.geometry) { 1031 AOX_DEBUG("Returned place contains no geometry"); 1032 return; 1033 } 1034 1035 AOX_DEBUG('Place changed [' + oPlace.geometry.location.lat() + '/' + oPlace.geometry.location.lng() + ']'); 1036 1037 sAdressRequested = oPlace.formatted_address; 1038 1039 if (typeof oPlace.geometry.viewport !== "undefined") { 1040 AOX_DEBUG('Viewport changed:'); 1041 AOX_DEBUG(oPlace.geometry.viewport); 1042 } 1043 1044 g_oGooglePlace.showPosition(oPlace.geometry.location.lat(), oPlace.geometry.location.lng(), oPlace.geometry.viewport); 1045} 1046 1047// Sélection d'une position par défaut 1048function selectDefaultPosition(optionsGoogleMap) { 1049 if ((g_sDefaultPositionLat != "") && (g_sDefaultPositionLng != "")) { 1050 1051 var fDefaultPositionLat = parseFloat(g_sDefaultPositionLat); 1052 var fDefaultPositionLng = parseFloat(g_sDefaultPositionLng); 1053 1054 var nDefaultZoom = 16; 1055 if (g_sDefaultZoom != "") { 1056 var nParseDefaultZoom = parseFloat(g_sDefaultZoom); 1057 1058 if (!isNaN(nParseDefaultZoom)) { 1059 nDefaultZoom = nParseDefaultZoom; 1060 } 1061 } 1062 1063 if (!isNaN(fDefaultPositionLat) && !isNaN(fDefaultPositionLng)) { 1064 AOX_DEBUG('Place by default [' + fDefaultPositionLat + '/' + fDefaultPositionLng + '][Zoom: ' + nDefaultZoom + "]"); 1065 1066 var optionDefaultPos = { 1067 center: { lat: fDefaultPositionLat, lng: fDefaultPositionLng }, 1068 zoom: nDefaultZoom 1069 }; 1070 1071 jQueryObject.extend(true, optionsGoogleMap, optionDefaultPos); 1072 } 1073 else { 1074 AOX_DEBUG('Erreur place by default no a float [' + g_sDefaultPositionLat + '/' + g_sDefaultPositionLng + ']'); 1075 } 1076 } 1077 1078 return optionsGoogleMap; 1079} 1080 1081// Selection d'une position 1082function selectPosition(nId, fLatitude, fLongitude, nZoom) { 1083 g_oGoogleMap.showPosition(fLatitude, fLongitude); 1084 g_oGoogleMap.m_oMap.setZoom(16); 1085 showInfoBulle(nId); 1086} 1087 1088//-------------------------------------------------------------- 1089//- Module Geolocalisation 1090//-------------------------------------------------------------- 1091
1092var sGeoPositionErrorDenied = "Vous devez accepter la géolocalisation pour utiliser cette fonction"; 1093var sGeoPositionErrorUnavailable = "Impossible de déterminer votre position"; 1094var sGeoPositionErrorTimeout = "Erreur positionnement, veuillez réessayer"; 1095 1096function geolocateMyPosition() { 1097 navigator.geolocation.getCurrentPosition(showMyPosition, errorGeolocateUser); 1098} 1099 1100function showMyPosition(oPosition) { 1101 if (oPosition) { 1102 1103 var fMyLat = oPosition.coords.latitude; 1104 var fMyLng = oPosition.coords.longitude; 1105 1106 AOX_DEBUG('My position [' + fMyLat + '/' + fMyLng + ']'); 1107 return g_oGoogleMap.showPosition(fMyLat, fMyLng); 1108 } 1109 1110 return false; 1111} 1112 1113function errorGeolocateUser(error) { 1114 switch (error.code) { 1115 case error.PERMISSION_DENIED: 1116 AOXJsManager.popAlertMessage({ msg: sGeoPositionErrorDenied }); 1117 break; 1118 case error.POSITION_UNAVAILABLE: 1119 AOXJsManager.popAlertMessage({ msg: sGeoPositionErrorUnavailable }); 1120 break; 1121 case error.TIMEOUT: 1122 AOXJsManager.popAlertMessage({ msg: sGeoPositionErrorTimeout }); 1123 break; 1124 } 1125} 1126 1127//-------------------------------------------------------------- 1128//- URL 1129//-------------------------------------------------------------- 1130 1131// Url page StoreLocator 1132function getUrlPageStoreLocator(fLatitude, fLongitude, nZoom) { 1133 1134 var sURL = document.location.protocol + "//" + document.location.hostname + document.location.pathname; 1135 1136 sURL = AOXJsManager.tools.string.findAndReplaceQueryStringParam(sURL, "fPositionLat", fLatitude); 1137 sURL = AOXJsManager.tools.string.findAndReplaceQueryStringParam(sURL, "fPositionLng", fLongitude); 1138 1139 if (nZoom != g_nAUCUN_ZOOM) { 1140 sURL = AOXJsManager.tools.string.findAndReplaceQueryStringParam(sURL, "nZoom", nZoom); 1141 } 1142 1143 1144 return sURL; 1145} 1146 1147//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 1148//::: ::: 1149//::: This routine calculates the distance between two points (given the ::: 1150//::: latitude/longitude of those points). ::: 1151//::: ::: 1152//::: Definitions: ::: 1153//::: South latitudes are negative, east longitudes are positive ::: 1154//::: ::: 1155//::: Passed to function: ::: 1156//::: lat1, lon1 = Latitude and Longitude of point 1 (in decimal degrees) ::: 1157//::: lat2, lon2 = Latitude and Longitude of point 2 (in decimal degrees) ::: 1158//::: unit = the unit you desire for results ::: 1159//::: where: 'M' is statute miles (default) ::: 1160//::: 'K' is kilometers ::: 1161//::: 'N' is nautical miles ::: 1162//::: ::: 1163//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 1164 1165function getDistance(lat1, lon1, lat2, lon2, unit) { 1166 var radlat1 = Math.PI * lat1 / 180 1167 var radlat2 = Math.PI * lat2 / 180 1168 var theta = lon1 - lon2 1169 var radtheta = Math.PI * theta / 180 1170 var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); 1171 dist = Math.acos(dist) 1172 dist = dist * 180 / Math.PI 1173 dist = dist * 60 * 1.1515 1174 if (unit == "K") { dist = dist * 1.609344 } 1175 if (unit == "N") { dist = dist * 0.8684 } 1176 return dist 1177}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.