diff --git a/package-lock.json b/package-lock.json
index 53a042c25..3c52f450d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4325,6 +4325,11 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
       "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
     },
+    "leaflet-active-area": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/leaflet-active-area/-/leaflet-active-area-1.2.1.tgz",
+      "integrity": "sha512-lZdkGt7VzaYCrarYaWnJ4BI2CrzrfivX35GLUc9l4w8y9ru88LLqcQzWZMw7bPzSzHO7do301z77mSfIvhWjFg=="
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
diff --git a/package.json b/package.json
index b9a574543..68e81ffee 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "css-vars-ponyfill": "^2.4.8",
     "floating-vue": "^1.0.0-beta.18",
     "leaflet": "^1.9.3",
+    "leaflet-active-area": "^1.2.1",
     "masonry-layout": "^4.2.2",
     "moment": "^2.29.4",
     "node-sass": "^7.0.3",
diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue
index 0a11f599c..a1ca87e83 100644
--- a/src/views/admin/components/lists/items-list.vue
+++ b/src/views/admin/components/lists/items-list.vue
@@ -1519,6 +1519,7 @@
                         :zoom="5"
                         :center="[-14.4086569, -51.31668]"
                         :zoom-animation="true"
+                        @ready="onMapReady()"
                         @click="clearSelectedMarkers()"
                         :options="{
                             name: 'tainacan-admin-view-mode-map',
@@ -1810,6 +1811,7 @@ import { Icon, latLng } from 'leaflet';
 import iconUrl from 'leaflet/dist/images/marker-icon.png';
 import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
 import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
+import * as LeafletActiveArea from 'leaflet-active-area';
 
 delete Icon.Default.prototype._getIconUrl;
 Icon.Default.mergeOptions({
@@ -1979,7 +1981,7 @@ export default {
                 ) {
                     for ( let i = 0; i < aMetadatum['metadata_type_options']['children_objects'].length; i++ )
                         if ( aMetadatum['metadata_type_options']['children_objects'][i]['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' ) {
-                            let childMetadatum = aMetadatum['metadata_type_options']['children_objects'][i];
+                            let childMetadatum = JSON.parse(JSON.stringify(aMetadatum['metadata_type_options']['children_objects'][i]));
                             childMetadatum.name = childMetadatum.name + ' (' + aMetadatum.name + ')';
                             geocoordinateMetadata.push(childMetadatum);
                         }
@@ -2407,6 +2409,10 @@ export default {
             let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 210;
             return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;
         },
+        onMapReady() {
+            if ( LeafletActiveArea && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
+                this.$refs['tainacan-admin-view-mode-map'].mapObject.setActiveArea('leaflet-active-area');
+        },
         clearSelectedMarkers() {
             this.mapSelectedItemId = false;
             this.selectedMarkerIndexes = [];
diff --git a/src/views/admin/scss/_view-mode-map.scss b/src/views/admin/scss/_view-mode-map.scss
index af7853515..34824f223 100644
--- a/src/views/admin/scss/_view-mode-map.scss
+++ b/src/views/admin/scss/_view-mode-map.scss
@@ -4,11 +4,29 @@
     display: flex;
     height: 60vh;
 
+
+    &.has-selected-item { 
+        #tainacan-admin-view-mode-map,
+        #tainacan-view-mode-map {
+            /deep/ .leaflet-active-area {
+                left: 310px;
+            }
+        }
+    }
+
     #tainacan-admin-view-mode-map,
     #tainacan-view-mode-map {
         border: none;
         border-left: 1px solid var(--tainacan-input-border-color);
 
+        /deep/ .leaflet-active-area {
+            position: absolute;
+            top: 56px;
+            left: 10px;
+            right: 42px;
+            height: calc(60vh - 76px)
+        }
+
         /deep/ .leaflet-marker-pane {
             filter: hue-rotate(-22deg);
         }
@@ -58,7 +76,7 @@
 
     .tainacan-records-container--map {
         height: auto;
-        max-height: calc(60vh - 72px);
+        max-height: calc(60vh - 54px);
         overflow-y: auto;
         overflow-x: hidden;
         width: 286px;
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
index 7f7fd7149..54e7ddb33 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
@@ -6,7 +6,9 @@
             <slot />
             
             <!-- MAP VIEW MODE -->
-           <div class="tainacan-leaflet-map-container">
+           <div 
+                    class="tainacan-leaflet-map-container"
+                    :class="{ 'has-selected-item': mapSelectedItemId }">
                 <ul class="tainacan-map-cards-container">
                     <li
                             role="listitem"
@@ -83,6 +85,7 @@
                         :center="[-14.4086569, -51.31668]"
                         :zoom-animation="true"
                         @click="clearSelectedMarkers()"
+                        @ready="onMapReady()"
                         :options="{
                             name: 'tainacan-view-mode-map',
                             zoomControl: false
@@ -307,6 +310,7 @@ import { Icon, latLng } from 'leaflet';
 import iconUrl from 'leaflet/dist/images/marker-icon.png';
 import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
 import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
+import * as LeafletActiveArea from 'leaflet-active-area';
 
 delete Icon.Default.prototype._getIconUrl;
 Icon.Default.mergeOptions({
@@ -420,7 +424,7 @@ export default {
                 ) {
                     for ( let i = 0; i < aMetadatum['metadata_type_options']['children_objects'].length; i++ )
                         if ( aMetadatum['metadata_type_options']['children_objects'][i]['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' ) {
-                            let childMetadatum = aMetadatum['metadata_type_options']['children_objects'][i];
+                            let childMetadatum = JSON.parse(JSON.stringify(aMetadatum['metadata_type_options']['children_objects'][i]));
                             childMetadatum.name = childMetadatum.name + ' (' + aMetadatum.name + ')';
                             geocoordinateMetadata.push(childMetadatum);
                         }
@@ -434,9 +438,9 @@ export default {
             setTimeout(() => {
                 if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
                     if (this.itemsLocations.length == 1)
-                        this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
+                        this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                     else
-                        this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
+                        this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                 }
             }, 500)
         },
@@ -452,6 +456,10 @@ export default {
         }
     },
     methods: {
+        onMapReady() {
+            if ( LeafletActiveArea && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
+                this.$refs['tainacan-view-mode-map'].mapObject.setActiveArea('leaflet-active-area');
+        },
         getItemImageHeight(imageWidth, imageHeight) {  
             let itemWidth = 120;
             return (imageHeight*itemWidth)/imageWidth;
@@ -467,9 +475,9 @@ export default {
             this.selectedMarkerIndexes = [];
             if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
                 if (this.itemsLocations.length == 1)
-                    this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
+                    this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                 else
-                    this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 48], paddingTopRight: [48, 48] });
+                    this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
             }
         },
         showItemByLocation(index) {
@@ -477,7 +485,7 @@ export default {
             this.selectedMarkerIndexes = [];
             this.selectedMarkerIndexes.push(index);
             if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
-                this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ],  { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
+                this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ],  { animate: true, maxZoom: 16 });
         },
         showLocationsByItem(item) {
             this.mapSelectedItemId = item.id;
@@ -492,9 +500,9 @@ export default {
             if ( selectedLocationsByItem.length) {
                 if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
                     if (selectedLocationsByItem.length > 1)
-                        this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
+                        this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                     else
-                        this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16, paddingTopLeft: [48, 286], paddingTopRight: [48, 48] });
+                        this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location),  { animate: true, maxZoom: 16 });
                 }
             } else {
                 this.$buefy.snackbar.open({