diff --git a/addons/website/static/src/snippets/s_map/000.scss b/addons/website/static/src/snippets/s_map/000.scss
index 54065bae418..3b8c0fb5d34 100644
--- a/addons/website/static/src/snippets/s_map/000.scss
+++ b/addons/website/static/src/snippets/s_map/000.scss
@@ -39,6 +39,11 @@ $s-map-desc-hover-alpha: 0.55 !default;
         background: rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha);
         color: color-yiq(rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha));
     }
+    .s_map_color_filter {
+        @include o-position-absolute(0, 0, 0, 0);
+        position: absolute !important;
+        pointer-events: none;
+    }
 }
 
 .editor_enable .s_map {
diff --git a/addons/website/static/src/snippets/s_map/options.js b/addons/website/static/src/snippets/s_map/options.js
index 1e6f79cb7e1..1d182e99322 100644
--- a/addons/website/static/src/snippets/s_map/options.js
+++ b/addons/website/static/src/snippets/s_map/options.js
@@ -1,52 +1,29 @@
-odoo.define('options.s_map_options', function (require) {
-'use strict';
+/** @odoo-module **/
 
-const {_t} = require('web.core');
-const options = require('web_editor.snippets.options');
+import {_t} from 'web.core';
+import options from 'web_editor.snippets.options';
 
 options.registry.Map = options.Class.extend({
     /**
-     *
      * @override
      */
-    onBuilt: function () {
-        this.updateUI();
-    },
-
-    /**
-     * @override
-     */
-    updateUI() {
-        const dataset = this.$target[0].dataset;
-        const embedded = this.$target.find('.o_embedded');
-        const info = this.$target.find('.missing_option_warning');
-        if (dataset.mapAddress) {
-            const url = 'https://maps.google.com/maps?q=' + encodeURIComponent(dataset.mapAddress)
-                + '&t=' + encodeURIComponent(dataset.mapType)
-                + '&z=' + encodeURIComponent(dataset.mapZoom)
-                + '&ie=UTF8&iwloc=&output=embed';
-            if (url !== embedded.attr('src')) {
-                embedded.attr('src', url);
-            }
-            embedded.removeClass('d-none');
-            info.addClass('d-none');
-        } else {
-            embedded.attr('src', 'about:blank');
-            embedded.addClass('d-none');
-            info.removeClass('d-none');
-        }
-        if (! (this.$target.hasClass('o_half_screen_height') || this.$target.hasClass('o_full_screen_height'))) {
-            this.$target.css('min-height', this.$target[0].dataset.mapMinHeight);
-        }
-        return this._super.apply(this, arguments).then(() => {
-            this.updateUIVisibility();
-        });
+    onBuilt() {
+        this._updateSource();
     },
 
     //--------------------------------------------------------------------------
     // Options
     //--------------------------------------------------------------------------
 
+    /**
+     * @see this.selectClass for parameters
+     */
+    async selectDataAttribute(previewMode, widgetValue, params) {
+        await this._super(...arguments);
+        if (['mapAddress', 'mapType', 'mapZoom'].includes(params.attributeName)) {
+            this._updateSource();
+        }
+    },
     /**
      * @see this.selectClass for parameters
      */
@@ -63,15 +40,6 @@ options.registry.Map = options.Class.extend({
             descriptionEl.remove();
         }
     },
-    /**
-     * @see this.selectClass for parameters
-     */
-    async setHeight(previewMode, widgetValue, params) {
-        if (widgetValue) {
-            this.$target[0].dataset.mapMinHeight = widgetValue;
-            this.$target.css('min-height', widgetValue);
-        }
-    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -84,10 +52,33 @@ options.registry.Map = options.Class.extend({
         if (methodName === 'showDescription') {
             return !!this.$target[0].querySelector('.description');
         }
-        if (methodName === 'setHeight') {
-            return this.$target[0].dataset.mapMinHeight;
-        }
         return this._super(...arguments);
     },
+    /**
+     * @private
+     */
+    _updateSource() {
+        const dataset = this.$target[0].dataset;
+        const $embedded = this.$target.find('.s_map_embedded');
+        const $info = this.$target.find('.missing_option_warning');
+        if (dataset.mapAddress) {
+            const url = 'https://maps.google.com/maps?q=' + encodeURIComponent(dataset.mapAddress)
+                + '&t=' + encodeURIComponent(dataset.mapType)
+                + '&z=' + encodeURIComponent(dataset.mapZoom)
+                + '&ie=UTF8&iwloc=&output=embed';
+            if (url !== $embedded.attr('src')) {
+                $embedded.attr('src', url);
+            }
+            $embedded.removeClass('d-none');
+            $info.addClass('d-none');
+        } else {
+            $embedded.attr('src', 'about:blank');
+            $embedded.addClass('d-none');
+            $info.removeClass('d-none');
+        }
+    },
 });
-});
+
+export default {
+    Map: options.registry.Map,
+};
diff --git a/addons/website/views/snippets/s_map.xml b/addons/website/views/snippets/s_map.xml
index 35c192cbf6e..40dd065e4cb 100644
--- a/addons/website/views/snippets/s_map.xml
+++ b/addons/website/views/snippets/s_map.xml
@@ -2,17 +2,15 @@
 <odoo>
 
 <template name="Map" id="s_map">
-    <section class="s_map" style="min-height: 100px;" data-map-type="m" data-map-zoom="12"  data-map-min-height="100px"
-        t-att-data-map-address="' '.join(filter(None, (user_id.company_id.street, user_id.company_id.city, user_id.company_id.state_id.display_name, user_id.company_id.country_id.display_name)))"
-    >
+    <section class="s_map pb56 pt56" data-map-type="m" data-map-zoom="12" t-att-data-map-address="' '.join(filter(None, (user_id.company_id.street, user_id.company_id.city, user_id.company_id.state_id.display_name, user_id.company_id.country_id.display_name)))">
         <div class="map_container o_not_editable">
             <div class="css_non_editable_mode_hidden">
                 <div class="missing_option_warning alert alert-info rounded-0 fade show d-none d-print-none">
                     An address must be specified for a map to be embedded
                 </div>
             </div>
-            <iframe class="d-none o_embedded o_not_editable" width="100%" height="100%" src="about:blank" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
-            <div class="o_we_bg_filter" style="background-color: rgba(239, 112, 112, 0) !important;"></div>
+            <iframe class="d-none s_map_embedded o_not_editable" width="100%" height="100%" src="about:blank" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
+            <div class="s_map_color_filter"/>
         </div>
     </section>
 </template>
@@ -49,15 +47,10 @@
                 <we-button data-select-data-attribute="2">2000 km</we-button>
             </we-select>
             <we-colorpicker string="Color filter" data-select-style="true"
-                data-css-property="background-color" data-color-prefix="bg-" data-apply-to=".o_we_bg_filter"/>
+                data-css-property="background-color" data-color-prefix="bg-" data-apply-to=".s_map_color_filter"/>
             <we-checkbox string="Description" data-no-preview="true" data-show-description="true"/>
         </div>
     </xpath>
-    <xpath expr="//div[@data-option-name='minHeight']" position="inside">
-        <div data-js="Map" data-selector=".s_map">
-            <we-input data-name="default_height" data-dependencies="minheight_auto_opt" string="⌙ Default" data-set-height="" data-unit="px" data-no-preview="true"/><!-- &emsp; -->
-        </div>
-    </xpath>
 </template>
 
 <record id="website.s_map_000_scss" model="ir.asset">