@wizishop/wizi-block 4.2.33-beta → 4.2.34-beta

package/bundles/wizishop-wizi-block.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@ngx-translate/core'), require('uuid'), require('@angular/cdk/drag-drop'), require('@angular/animations'), require('@angular/common/http'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/platform-browser'), require('@ctrl/tinycolor'), require('quill'), require('monaco-editor'), require('ngx-quill'), require('@fortawesome/fontawesome-svg-core'), require('@fortawesome/free-solid-svg-icons'), require('@fortawesome/free-regular-svg-icons'), require('@fortawesome/free-brands-svg-icons'), require('@wizishop/ng-wizi-bulma'), require('ngx-scrollbar'), require('@editorjs/editorjs'), require('@jaames/iro'), require('codemirror'), require('@codemirror/state'), require('@codemirror/lang-html'), require('ngx-monaco-editor'), require('leaflet'), require('places.js'), require('@asymmetrik/ngx-leaflet'), require('ngx-color-picker')) :
-    typeof define === 'function' && define.amd ? define('@wizishop/wizi-block', ['exports', '@angular/core', 'rxjs', '@ngx-translate/core', 'uuid', '@angular/cdk/drag-drop', '@angular/animations', '@angular/common/http', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/platform-browser', '@ctrl/tinycolor', 'quill', 'monaco-editor', 'ngx-quill', '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-brands-svg-icons', '@wizishop/ng-wizi-bulma', 'ngx-scrollbar', '@editorjs/editorjs', '@jaames/iro', 'codemirror', '@codemirror/state', '@codemirror/lang-html', 'ngx-monaco-editor', 'leaflet', 'places.js', '@asymmetrik/ngx-leaflet', 'ngx-color-picker'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['wizi-block'] = {}), global.ng.core, global.rxjs, global.i1, global['^3']['3']['2'], global.ng.cdk.dragDrop, global.ng.animations, global.ng.common.http, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.platformBrowser, global['^2']['5']['2'], global['^1']['3']['6'], global.monaco, global['^5']['0']['0'], global['^1']['2']['27'], global['^5']['12']['1'], global['^5']['12']['1'], global['^5']['12']['1'], global['^7']['0']['11'], global['^7']['2']['1-beta']['0'], global.EditorJS, global.iro, global.codemirror, global.state, global.langHtml, global['^8']['1']['1'], global['^1']['5']['1'], global['^1']['16']['4'], global['^5']['0']['2'], global['^9']['0']['0']));
-}(this, (function (exports, i0, rxjs, i1, uuid, dragDrop, animations, i1$1, operators, common, forms, platformBrowser, tinycolor, QuillNamespace, monaco, ngxQuill, fontawesomeSvgCore, freeSolidSvgIcons, freeRegularSvgIcons, freeBrandsSvgIcons, ngWiziBulma, ngxScrollbar, EditorJS, iro, codemirror, state, langHtml, ngxMonacoEditor, leaflet, places, ngxLeaflet, ngxColorPicker) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@ngx-translate/core'), require('uuid'), require('@angular/cdk/drag-drop'), require('@angular/animations'), require('@angular/common/http'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/platform-browser'), require('@ctrl/tinycolor'), require('quill'), require('monaco-editor'), require('ngx-quill'), require('@fortawesome/fontawesome-svg-core'), require('@fortawesome/free-solid-svg-icons'), require('@fortawesome/free-regular-svg-icons'), require('@fortawesome/free-brands-svg-icons'), require('@wizishop/ng-wizi-bulma'), require('ngx-scrollbar'), require('@editorjs/editorjs'), require('@jaames/iro'), require('codemirror'), require('@codemirror/state'), require('@codemirror/lang-html'), require('ngx-monaco-editor'), require('leaflet'), require('@asymmetrik/ngx-leaflet'), require('ngx-google-places-autocomplete'), require('ngx-color-picker')) :
+    typeof define === 'function' && define.amd ? define('@wizishop/wizi-block', ['exports', '@angular/core', 'rxjs', '@ngx-translate/core', 'uuid', '@angular/cdk/drag-drop', '@angular/animations', '@angular/common/http', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/platform-browser', '@ctrl/tinycolor', 'quill', 'monaco-editor', 'ngx-quill', '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-brands-svg-icons', '@wizishop/ng-wizi-bulma', 'ngx-scrollbar', '@editorjs/editorjs', '@jaames/iro', 'codemirror', '@codemirror/state', '@codemirror/lang-html', 'ngx-monaco-editor', 'leaflet', '@asymmetrik/ngx-leaflet', 'ngx-google-places-autocomplete', 'ngx-color-picker'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['wizi-block'] = {}), global.ng.core, global.rxjs, global.i1, global['^3']['3']['2'], global.ng.cdk.dragDrop, global.ng.animations, global.ng.common.http, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.platformBrowser, global['^2']['5']['2'], global['^1']['3']['6'], global.monaco, global['^5']['0']['0'], global['^1']['2']['27'], global['^5']['12']['1'], global['^5']['12']['1'], global['^5']['12']['1'], global['^7']['0']['11'], global['^7']['2']['1-beta']['0'], global.EditorJS, global.iro, global.codemirror, global.state, global.langHtml, global['^8']['1']['1'], global['^1']['5']['1'], global['^5']['0']['2'], global.ngxGooglePlacesAutocomplete, global['^9']['0']['0']));
+}(this, (function (exports, i0, rxjs, i1, uuid, dragDrop, animations, i1$1, operators, common, forms, platformBrowser, tinycolor, QuillNamespace, monaco, ngxQuill, fontawesomeSvgCore, freeSolidSvgIcons, freeRegularSvgIcons, freeBrandsSvgIcons, ngWiziBulma, ngxScrollbar, EditorJS, iro, codemirror, state, langHtml, ngxMonacoEditor, leaflet, ngxLeaflet, ngxGooglePlacesAutocomplete, ngxColorPicker) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +31,6 @@
     var QuillNamespace__namespace = /*#__PURE__*/_interopNamespace(QuillNamespace);
     var EditorJS__default = /*#__PURE__*/_interopDefaultLegacy(EditorJS);
     var iro__default = /*#__PURE__*/_interopDefaultLegacy(iro);
-    var places__default = /*#__PURE__*/_interopDefaultLegacy(places);
 
     var MediaConnectorService = /** @class */ (function () {
         function MediaConnectorService() {
@@ -3921,7 +3920,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             imgSimpleFormDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             imgSimpleFormDto.forms.push(parallaxInvertedImgSimpleContentDto);
             return imgSimpleFormDto;
         };
@@ -5082,7 +5081,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             TextBackgroundsSimpleFormDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             TextBackgroundsSimpleFormDto.forms.push(parallaxInvertedImgSimpleContentDto);
             return TextBackgroundsSimpleFormDto;
         };
@@ -5166,7 +5165,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             formsDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             formsDto.forms.push(parallaxInvertedImgSimpleContentDto);
             return formsDto;
         };
@@ -5250,7 +5249,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             formsDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             formsDto.forms.push(parallaxInvertedImgSimpleContentDto);
             var colorContentDto = new FormsContentDto(FORM_NAME_COLOR, 'wb.blocks.FormContentDto.112', FORM_TYPE_COLOR, content[FORM_NAME_COLOR], '#122231', '');
             formsDto.forms.push(colorContentDto);
@@ -6921,7 +6920,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             imgBannerFormDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             imgBannerFormDto.forms.push(parallaxInvertedImgSimpleContentDto);
             return imgBannerFormDto;
         };
@@ -11236,6 +11235,7 @@
                 },
                 clipboard: {
                     matchers: [['BR', this.lineBreakMatcher]],
+                    matchVisual: false,
                 },
                 keyboard: {
                     bindings: {
@@ -20884,7 +20884,9 @@
                             _c.label = 1;
                         case 1:
                             if (!currentNode) return [3 /*break*/, 4];
-                            if ((!currentNode.textContent || currentNode.textContent.length === 0) || (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.innerText.length === 0)) {
+                            if (!currentNode.textContent ||
+                                currentNode.textContent.length === 0 ||
+                                (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.innerText.length === 0)) {
                                 previousSibling = currentNode.previousSibling;
                                 parentContainer.removeChild(currentNode);
                                 currentNode = previousSibling;
@@ -20965,7 +20967,8 @@
             var currentElementAttributes = currentElement.getAttributeNames();
             currentElementAttributes.forEach(function (attribute) {
                 if (attribute !== 'style') {
-                    if (!nextElement.getAttribute(attribute) || nextElement.getAttribute(attribute) !== currentElement.getAttribute(attribute)) {
+                    if (!nextElement.getAttribute(attribute) ||
+                        nextElement.getAttribute(attribute) !== currentElement.getAttribute(attribute)) {
                         return false;
                     }
                 }
@@ -29374,19 +29377,15 @@
     ];
     QuotesSimpleBackgroundComponent.ctorParameters = function () { return []; };
 
-    var OpenMapDto = /** @class */ (function () {
-        function OpenMapDto() {
-        }
-        return OpenMapDto;
-    }());
-
     var MapFullpageComponent = /** @class */ (function (_super) {
         __extends(MapFullpageComponent, _super);
         function MapFullpageComponent(externalConfigService) {
             var _this = _super.call(this) || this;
             _this.externalConfigService = externalConfigService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29396,41 +29395,29 @@
         MapFullpageComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
             if (this.contentBlock[this.FORM_NAME_COORDINATE_Y] && this.contentBlock[this.FORM_NAME_COORDINATE_X]) {
-                var algolia = new OpenMapDto();
-                algolia.suggestion = {
-                    latlng: {
-                        lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
-                        lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                this.googleMapReturnElement = {
+                    suggestion: {
+                        latlng: {
+                            lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
+                            lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                        },
+                        value: '',
                     },
-                    value: '',
                 };
-                this.setCoordinateOnPlaces(algolia);
+                this.setCoordinateOnPlaces(this.googleMapReturnElement);
             }
         };
-        MapFullpageComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.showMap) {
-                var placesAutocomplete = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: this.input.nativeElement,
-                });
-                placesAutocomplete.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
-        };
-        MapFullpageComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapFullpageComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
                 layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29439,24 +29426,23 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapFullpageComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapFullpageComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
         };
         /**
          * Avoid partial map loaded at the initialization
@@ -29472,7 +29458,7 @@
     MapFullpageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapFullpageService.selector(),
-                    template: "<div class=\"wb-map-fullpage\">\n    <div class=\"wb-map-fullpage__container\">\n        <div *ngIf=\"showMap\">\n            <div class=\"wb-map-fullpage__container__config\">\n                <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\" (click)=\"createEditAlgoliaInput()\">\n                    <p>{{ 'wb.structures.template.19' | translate }}</p>\n                    <input\n                        id=\"address-input-edit{{ uuid }}\"\n                        type=\"text\"\n                        [(ngModel)]=\"address\"\n                        #myInputEdit\n                        (click)=\"myInputEdit.select()\"\n                    />\n                </wb-structure-config>\n            </div>\n            <div class=\"wb-map-fullpage__cover\"></div>\n            <div\n                class=\"wb-map-fullpage__container__map\"\n                leaflet\n                [leafletOptions]=\"options\"\n                [leafletLayers]=\"layers\"\n                [(leafletCenter)]=\"center\"\n                (leafletMapReady)=\"onMapReady($event)\"\n            ></div>\n        </div>\n    </div>\n    <div class=\"wb-map-fullpage__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-fullpage\">\n    <div class=\"wb-map-fullpage__container\">\n        <div *ngIf=\"showMap\">\n            <div class=\"wb-map-fullpage__container__config\">\n                <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\">\n                    <p>{{ 'wb.structures.template.19' | translate }}</p>\n                    <input\n                        id=\"address-input-edit{{ uuid }}\"\n                        type=\"text\"\n                        [(ngModel)]=\"address\"\n                        #myInputEdit\n                        (click)=\"myInputEdit.select()\"\n                        ngx-google-places-autocomplete\n                        (onAddressChange)=\"handleAddressChange($event)\"\n                    />\n                </wb-structure-config>\n            </div>\n            <div class=\"wb-map-fullpage__cover\"></div>\n            <div\n                class=\"wb-map-fullpage__container__map\"\n                leaflet\n                [leafletOptions]=\"options\"\n                [leafletLayers]=\"layers\"\n                [(leafletCenter)]=\"center\"\n                (leafletMapReady)=\"onMapReady($event)\"\n            ></div>\n        </div>\n    </div>\n    <div class=\"wb-map-fullpage__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input\n            id=\"address-input{{ uuid }}\"\n            type=\"text\"\n            [(ngModel)]=\"address\"\n            #myInput\n            (click)=\"myInput.select()\"\n            ngx-google-places-autocomplete\n            (onAddressChange)=\"handleAddressChange($event)\"\n        />\n    </div>\n</div>\n"
                 },] }
     ];
     MapFullpageComponent.ctorParameters = function () { return [
@@ -29488,7 +29474,9 @@
             var _this = _super.call(this) || this;
             _this.externalConfigService = externalConfigService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29498,41 +29486,29 @@
         MapLeftTextComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
             if (this.contentBlock[this.FORM_NAME_COORDINATE_Y] && this.contentBlock[this.FORM_NAME_COORDINATE_X]) {
-                var algolia = new OpenMapDto();
-                algolia.suggestion = {
-                    latlng: {
-                        lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
-                        lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                this.googleMapReturnElement = {
+                    suggestion: {
+                        latlng: {
+                            lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
+                            lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                        },
+                        value: '',
                     },
-                    value: '',
                 };
-                this.setCoordinateOnPlaces(algolia);
-            }
-        };
-        MapLeftTextComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.showMap) {
-                var placesAutocomplete = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: this.input.nativeElement,
-                });
-                placesAutocomplete.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
+                this.setCoordinateOnPlaces(this.googleMapReturnElement);
             }
         };
-        MapLeftTextComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapLeftTextComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
                 layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29541,24 +29517,23 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapLeftTextComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapLeftTextComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
         };
         /**
          * Avoid partial map loaded at the initialization
@@ -29574,7 +29549,7 @@
     MapLeftTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapLeftTextService.selector(),
-                    template: "<div class=\"wb-map-left-text\">\n    <div class=\"columns is-gapless\">\n        <div class=\"column\">\n            <div class=\"wb-map-left-text__addresses\">\n                <div class=\"wb-map-left-text__address\">\n                    <wb-editorjs\n                        [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                        (contentChange)=\"persist()\"\n                        [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                    >\n                    </wb-editorjs>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-left-text__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-left-text__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div class=\"wb-map-left-text__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-left-text__container__config\">\n                        <wb-structure-config\n                            [blockUUID]=\"uuid\"\n                            [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\"\n                            (click)=\"createEditAlgoliaInput()\"\n                            [isFullwidth]=\"true\"\n                        >\n                            <p>{{ 'wb.structures.template.19' | translate }}</p>\n                            <input\n                                id=\"address-input-edit{{ uuid }}\"\n                                type=\"text\"\n                                [(ngModel)]=\"address\"\n                                #myInputEdit\n                                (click)=\"myInputEdit.select()\"\n                            />\n                        </wb-structure-config>\n                    </div>\n                    <div class=\"wb-map-left-text__cover\"></div>\n                    <div\n                        class=\"wb-map-left-text__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n            <div class=\"wb-map-left-text__selector\" *ngIf=\"!showMap\">\n                <p>{{ 'wb.structures.template.19' | translate }}</p>\n                <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-left-text\">\n    <div class=\"columns is-gapless\">\n        <div class=\"column\">\n            <div class=\"wb-map-left-text__addresses\">\n                <div class=\"wb-map-left-text__address\">\n                    <wb-editorjs\n                        [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                        (contentChange)=\"persist()\"\n                        [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                    >\n                    </wb-editorjs>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-left-text__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-left-text__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div class=\"wb-map-left-text__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-left-text__container__config\">\n                        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\" [isFullwidth]=\"true\">\n                            <p>{{ 'wb.structures.template.19' | translate }}</p>\n                            <input\n                                id=\"address-input-edit{{ uuid }}\"\n                                type=\"text\"\n                                [(ngModel)]=\"address\"\n                                #myInputEdit\n                                (click)=\"myInputEdit.select()\"\n                                ngx-google-places-autocomplete\n                                (onAddressChange)=\"handleAddressChange($event)\"\n                            />\n                        </wb-structure-config>\n                    </div>\n                    <div class=\"wb-map-left-text__cover\"></div>\n                    <div\n                        class=\"wb-map-left-text__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n            <div class=\"wb-map-left-text__selector\" *ngIf=\"!showMap\">\n                <p>{{ 'wb.structures.template.19' | translate }}</p>\n                <input\n                    id=\"address-input{{ uuid }}\"\n                    type=\"text\"\n                    [(ngModel)]=\"address\"\n                    #myInput\n                    (click)=\"myInput.select()\"\n                    ngx-google-places-autocomplete\n                    (onAddressChange)=\"handleAddressChange($event)\"\n                />\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapLeftTextComponent.ctorParameters = function () { return [
@@ -29590,7 +29565,9 @@
             var _this = _super.call(this) || this;
             _this.externalConfigService = externalConfigService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29600,41 +29577,29 @@
         MapRightTextComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
             if (this.contentBlock[this.FORM_NAME_COORDINATE_Y] && this.contentBlock[this.FORM_NAME_COORDINATE_X]) {
-                var algolia = new OpenMapDto();
-                algolia.suggestion = {
-                    latlng: {
-                        lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
-                        lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                this.googleMapReturnElement = {
+                    suggestion: {
+                        latlng: {
+                            lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
+                            lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                        },
+                        value: '',
                     },
-                    value: '',
                 };
-                this.setCoordinateOnPlaces(algolia);
-            }
-        };
-        MapRightTextComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.showMap) {
-                var placesAutocomplete = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: this.input.nativeElement,
-                });
-                placesAutocomplete.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
+                this.setCoordinateOnPlaces(this.googleMapReturnElement);
             }
         };
-        MapRightTextComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapRightTextComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
                 layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29643,24 +29608,23 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapRightTextComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapRightTextComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
         };
         /**
          * Avoid partial map loaded at the initialization
@@ -29676,7 +29640,7 @@
     MapRightTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapRightTextService.selector(),
-                    template: "<div class=\"wb-map-right-text\">\n    <div class=\"columns is-gapless\">\n        <div class=\"column\">\n            <div class=\"wb-map-right-text__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-right-text__container__config\">\n                        <wb-structure-config\n                            [blockUUID]=\"uuid\"\n                            [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\"\n                            (click)=\"createEditAlgoliaInput()\"\n                            [isFullwidth]=\"true\"\n                        >\n                            <p>{{ 'wb.structures.template.19' | translate }}</p>\n                            <input\n                                id=\"address-input-edit{{ uuid }}\"\n                                type=\"text\"\n                                [(ngModel)]=\"address\"\n                                #myInputEdit\n                                (click)=\"myInputEdit.select()\"\n                            />\n                        </wb-structure-config>\n                    </div>\n                    <div class=\"wb-map-right-text__cover\"></div>\n                    <div\n                        class=\"wb-map-right-text__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n            <div class=\"wb-map-right-text__selector\" *ngIf=\"!showMap\">\n                <p>{{ 'wb.structures.template.19' | translate }}</p>\n                <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n            </div>\n        </div>\n        <div class=\"column\">\n            <div class=\"wb-map-right-text__addresses\">\n                <div class=\"wb-map-right-text__address\">\n                    <wb-editorjs\n                        [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                        (contentChange)=\"persist()\"\n                        [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                    >\n                    </wb-editorjs>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-right-text__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-right-text__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-right-text\">\n    <div class=\"columns is-gapless\">\n        <div class=\"column\">\n            <div class=\"wb-map-right-text__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-right-text__container__config\">\n                        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\" [isFullwidth]=\"true\">\n                            <p>{{ 'wb.structures.template.19' | translate }}</p>\n                            <input\n                                id=\"address-input-edit{{ uuid }}\"\n                                type=\"text\"\n                                [(ngModel)]=\"address\"\n                                #myInputEdit\n                                (click)=\"myInputEdit.select()\"\n                                ngx-google-places-autocomplete\n                                (onAddressChange)=\"handleAddressChange($event)\"\n                            />\n                        </wb-structure-config>\n                    </div>\n                    <div class=\"wb-map-right-text__cover\"></div>\n                    <div\n                        class=\"wb-map-right-text__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n            <div class=\"wb-map-right-text__selector\" *ngIf=\"!showMap\">\n                <p>{{ 'wb.structures.template.19' | translate }}</p>\n                <input\n                    id=\"address-input{{ uuid }}\"\n                    type=\"text\"\n                    [(ngModel)]=\"address\"\n                    #myInput\n                    (click)=\"myInput.select()\"\n                    ngx-google-places-autocomplete\n                    (onAddressChange)=\"handleAddressChange($event)\"\n                />\n            </div>\n        </div>\n        <div class=\"column\">\n            <div class=\"wb-map-right-text__addresses\">\n                <div class=\"wb-map-right-text__address\">\n                    <wb-editorjs\n                        [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                        (contentChange)=\"persist()\"\n                        [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                    >\n                    </wb-editorjs>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-right-text__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-right-text__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapRightTextComponent.ctorParameters = function () { return [
@@ -29686,6 +29650,12 @@
         input: [{ type: i0.ViewChild, args: ['myInput',] }]
     };
 
+    var OpenMapDto = /** @class */ (function () {
+        function OpenMapDto() {
+        }
+        return OpenMapDto;
+    }());
+
     var MapTextFormComponent = /** @class */ (function (_super) {
         __extends(MapTextFormComponent, _super);
         function MapTextFormComponent(apiService, externalConfigService) {
@@ -29693,7 +29663,9 @@
             _this.apiService = apiService;
             _this.externalConfigService = externalConfigService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29729,30 +29701,17 @@
                 }
             });
         };
-        MapTextFormComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.showMap) {
-                var placesAutocomplete = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: this.input.nativeElement,
-                });
-                placesAutocomplete.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
-        };
-        MapTextFormComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapTextFormComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
-                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 16, attribution: 'WiziShop' })],
+                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29761,24 +29720,32 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapTextFormComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapTextFormComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
+        };
+        /**
+         * Avoid partial map loaded at the initialization
+         * @param map
+         */
+        MapTextFormComponent.prototype.onMapReady = function (map) {
+            setTimeout(function () {
+                map.invalidateSize();
+            }, 0);
         };
         MapTextFormComponent.prototype.selectThisForm = function () {
             var _this = this;
@@ -29791,21 +29758,12 @@
             this.contentBlock[FORM_NAME_ID_FORM] = this.selectedValue.id;
             this.persist();
         };
-        /**
-         * Avoid partial map loaded at the initialization
-         * @param map
-         */
-        MapTextFormComponent.prototype.onMapReady = function (map) {
-            setTimeout(function () {
-                map.invalidateSize();
-            }, 0);
-        };
         return MapTextFormComponent;
     }(StructuresComponent));
     MapTextFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapTextFormService.selector(),
-                    template: "<div class=\"wb-map-text-form\">\n    <div class=\"wb-map-text-form__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config\n            [blockUUID]=\"uuid\"\n            [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\"\n            (click)=\"createEditAlgoliaInput()\"\n            [isFullwidth]=\"true\"\n        >\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input id=\"address-input-edit{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInputEdit (click)=\"myInputEdit.select()\" />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-text-form__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div class=\"wb-map-text-form__addresses\">\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-text-form__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-text-form__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n            <div class=\"wb-map-text-form__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-text-form__cover\"></div>\n                    <div\n                        class=\"wb-map-text-form__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-text-form__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-text-form__selector\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-text-form__container-form\">\n                <div class=\"wb-map-text-form__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-text-form__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-text-form\">\n    <div class=\"wb-map-text-form__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\" [isFullwidth]=\"true\">\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input\n                id=\"address-input-edit{{ uuid }}\"\n                type=\"text\"\n                [(ngModel)]=\"address\"\n                #myInputEdit\n                (click)=\"myInputEdit.select()\"\n                ngx-google-places-autocomplete\n                (onAddressChange)=\"handleAddressChange($event)\"\n            />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-text-form__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input\n            id=\"address-input{{ uuid }}\"\n            type=\"text\"\n            [(ngModel)]=\"address\"\n            #myInput\n            (click)=\"myInput.select()\"\n            ngx-google-places-autocomplete\n            (onAddressChange)=\"handleAddressChange($event)\"\n        />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div class=\"wb-map-text-form__addresses\">\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-text-form__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-text-form__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n            <div class=\"wb-map-text-form__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-text-form__cover\"></div>\n                    <div\n                        class=\"wb-map-text-form__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-text-form__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-text-form__selector\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-text-form__container-form\">\n                <div class=\"wb-map-text-form__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-text-form__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapTextFormComponent.ctorParameters = function () { return [
@@ -29822,7 +29780,9 @@
             var _this = _super.call(this) || this;
             _this.apiService = apiService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29847,28 +29807,17 @@
                 }
             });
         };
-        MapBackgroundFormLeftComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            var placesAutocomplete = places__default['default']({
-                appId: 'pl9OI1NPY62Y',
-                apiKey: '290e5a0e33e751c85c36690d502991fc',
-                container: this.input.nativeElement,
-            });
-            placesAutocomplete.on('change', function (algoliaReturnElement) {
-                _this.setCoordinateOnPlaces(algoliaReturnElement);
-            });
-        };
-        MapBackgroundFormLeftComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapBackgroundFormLeftComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
-                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 16, attribution: 'WiziShop' })],
+                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29877,24 +29826,32 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapBackgroundFormLeftComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: 'pl9OI1NPY62Y',
-                    apiKey: '290e5a0e33e751c85c36690d502991fc',
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapBackgroundFormLeftComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
+        };
+        /**
+         * Avoid partial map loaded at the initialization
+         * @param map
+         */
+        MapBackgroundFormLeftComponent.prototype.onMapReady = function (map) {
+            setTimeout(function () {
+                map.invalidateSize();
+            }, 0);
         };
         MapBackgroundFormLeftComponent.prototype.selectThisForm = function () {
             var _this = this;
@@ -29907,21 +29864,12 @@
             this.contentBlock[FORM_NAME_ID_FORM] = this.selectedValue.id;
             this.persist();
         };
-        /**
-         * Avoid partial map loaded at the initialization
-         * @param map
-         */
-        MapBackgroundFormLeftComponent.prototype.onMapReady = function (map) {
-            setTimeout(function () {
-                map.invalidateSize();
-            }, 0);
-        };
         return MapBackgroundFormLeftComponent;
     }(StructuresComponent));
     MapBackgroundFormLeftComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapBackgroundFormLeftService.selector(),
-                    template: "<div class=\"wb-map-background-form-left\">\n    <div class=\"wb-map-background-form-left__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config\n            [blockUUID]=\"uuid\"\n            [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\"\n            (click)=\"createEditAlgoliaInput()\"\n            [isFullwidth]=\"true\"\n        >\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input id=\"address-input-edit{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInputEdit (click)=\"myInputEdit.select()\" />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-background-form-left__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-background-form-left__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-background-form-left__selector-form\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-background-form-left__container-form\">\n                <div class=\"wb-map-background-form-left__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-background-form-left__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"wb-map-background-form-left__container\">\n                <div>\n                    <div class=\"wb-map-background-form-left__cover\"></div>\n                    <div\n                        class=\"wb-map-background-form-left__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-background-form-left\">\n    <div class=\"wb-map-background-form-left__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\" [isFullwidth]=\"true\">\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input\n                id=\"address-input-edit{{ uuid }}\"\n                type=\"text\"\n                [(ngModel)]=\"address\"\n                #myInputEdit\n                (click)=\"myInputEdit.select()\"\n                ngx-google-places-autocomplete\n                (onAddressChange)=\"handleAddressChange($event)\"\n            />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-background-form-left__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input\n            id=\"address-input{{ uuid }}\"\n            type=\"text\"\n            [(ngModel)]=\"address\"\n            #myInput\n            (click)=\"myInput.select()\"\n            ngx-google-places-autocomplete\n            (onAddressChange)=\"handleAddressChange($event)\"\n        />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-background-form-left__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-background-form-left__selector-form\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-background-form-left__container-form\">\n                <div class=\"wb-map-background-form-left__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-background-form-left__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"wb-map-background-form-left__container\">\n                <div>\n                    <div class=\"wb-map-background-form-left__cover\"></div>\n                    <div\n                        class=\"wb-map-background-form-left__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapBackgroundFormLeftComponent.ctorParameters = function () { return [
@@ -29937,7 +29885,9 @@
             var _this = _super.call(this) || this;
             _this.apiService = apiService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29962,28 +29912,17 @@
                 }
             });
         };
-        MapBackgroundFormRightComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            var placesAutocomplete = places__default['default']({
-                appId: 'pl9OI1NPY62Y',
-                apiKey: '290e5a0e33e751c85c36690d502991fc',
-                container: this.input.nativeElement,
-            });
-            placesAutocomplete.on('change', function (algoliaReturnElement) {
-                _this.setCoordinateOnPlaces(algoliaReturnElement);
-            });
-        };
-        MapBackgroundFormRightComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapBackgroundFormRightComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
-                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 16, attribution: 'WiziShop' })],
+                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29992,24 +29931,32 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapBackgroundFormRightComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: 'pl9OI1NPY62Y',
-                    apiKey: '290e5a0e33e751c85c36690d502991fc',
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapBackgroundFormRightComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
+        };
+        /**
+         * Avoid partial map loaded at the initialization
+         * @param map
+         */
+        MapBackgroundFormRightComponent.prototype.onMapReady = function (map) {
+            setTimeout(function () {
+                map.invalidateSize();
+            }, 0);
         };
         MapBackgroundFormRightComponent.prototype.selectThisForm = function () {
             var _this = this;
@@ -30022,21 +29969,12 @@
             this.contentBlock[FORM_NAME_ID_FORM] = this.selectedValue.id;
             this.persist();
         };
-        /**
-         * Avoid partial map loaded at the initialization
-         * @param map
-         */
-        MapBackgroundFormRightComponent.prototype.onMapReady = function (map) {
-            setTimeout(function () {
-                map.invalidateSize();
-            }, 0);
-        };
         return MapBackgroundFormRightComponent;
     }(StructuresComponent));
     MapBackgroundFormRightComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapBackgroundFormRightService.selector(),
-                    template: "<div class=\"wb-map-background-form-right\">\n    <div class=\"wb-map-background-form-right__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config\n            [blockUUID]=\"uuid\"\n            [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\"\n            (click)=\"createEditAlgoliaInput()\"\n            [isFullwidth]=\"true\"\n        >\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input id=\"address-input-edit{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInputEdit (click)=\"myInputEdit.select()\" />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-background-form-right__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div class=\"wb-map-background-form-right__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-background-form-right__cover\"></div>\n                    <div\n                        class=\"wb-map-background-form-right__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-background-form-right__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-background-form-right__selector\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-background-form-right__container-form\">\n                <div class=\"wb-map-background-form-right__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-background-form-right__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-background-form-right\">\n    <div class=\"wb-map-background-form-right__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\" [isFullwidth]=\"true\">\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input\n                id=\"address-input-edit{{ uuid }}\"\n                type=\"text\"\n                [(ngModel)]=\"address\"\n                #myInputEdit\n                (click)=\"myInputEdit.select()\"\n                ngx-google-places-autocomplete\n                (onAddressChange)=\"handleAddressChange($event)\"\n            />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-background-form-right__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input\n            id=\"address-input{{ uuid }}\"\n            type=\"text\"\n            [(ngModel)]=\"address\"\n            #myInput\n            (click)=\"myInput.select()\"\n            ngx-google-places-autocomplete\n            (onAddressChange)=\"handleAddressChange($event)\"\n        />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div class=\"wb-map-background-form-right__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-background-form-right__cover\"></div>\n                    <div\n                        class=\"wb-map-background-form-right__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-background-form-right__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-background-form-right__selector\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-background-form-right__container-form\">\n                <div class=\"wb-map-background-form-right__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-background-form-right__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapBackgroundFormRightComponent.ctorParameters = function () { return [
@@ -33202,6 +33140,7 @@
                     imports: [
                         SharedModule,
                         ngxMonacoEditor.MonacoEditorModule,
+                        ngxGooglePlacesAutocomplete.GooglePlaceModule,
                         ngxQuill.QuillModule,
                         ngxLeaflet.LeafletModule,
                         ngWiziBulma.NwbCommonModule,