diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 2da18137b39d352f0a3123a470c164de3791f37f..a78caaa5cd5cc7e7fe54c148fe6472fe4697060f 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -5,6 +5,7 @@
 @import '../../../assets/scss/shapes';
 @import '../../../assets/scss/buttons';
 @import '../../../assets/scss/breakpoint';
+@import '../../../assets/scss/z-index';
 
 .map-wrapper {
   border-radius: 6px;
@@ -86,6 +87,7 @@
     }
   }
   &:hover {
+    z-index: calc($map-selected-marker - 1) !important;
     svg {
       fill: $blue-hover;
       &.mdm {
@@ -160,3 +162,7 @@
 .body-wrap {
   height: 400px;
 }
+
+::ng-deep .on-top-marker {
+  z-index: $map-selected-marker !important;
+}
diff --git a/src/app/map/services/marker.ts b/src/app/map/services/marker.ts
index b33008e4e0c0746c02e1e73b4964bf7baadcee2b..fb940ba4c2b51482b53730cd1116f9c8c21288b0 100644
--- a/src/app/map/services/marker.ts
+++ b/src/app/map/services/marker.ts
@@ -8,14 +8,14 @@ export const markerIcon = divIcon({
   popupAnchor: [0, -48],
 });
 export const markerIconActive = divIcon({
-  className: null,
+  className: 'on-top-marker',
   html: '<svg width="48" height="48"><use xlink:href="assets/ico/sprite.svg#map-markerSelected"></use></svg>',
   iconSize: [48, 48],
   iconAnchor: [24, 48],
   popupAnchor: [0, -48],
 });
 export const markerIconHover = divIcon({
-  className: null,
+  className: 'on-top-marker',
   html: '<svg width="48" height="48"><use xlink:href="assets/ico/sprite.svg#map-markerHover"></use></svg>',
   iconSize: [48, 48],
   iconAnchor: [24, 48],
diff --git a/src/assets/scss/_z-index.scss b/src/assets/scss/_z-index.scss
index fc1ca81b6c627868b3859b58b1ae03543000d7b1..956dfa77b40550d03a46a9d10462b65241e0dee6 100644
--- a/src/assets/scss/_z-index.scss
+++ b/src/assets/scss/_z-index.scss
@@ -1,3 +1,4 @@
+$map-selected-marker: 600;
 // Phone view
 $btn-phone-switch-map-list-z-index: 1002;
 $menu-phone-z-index: 1003;