diff --git a/addons/website/i18n/website.pot b/addons/website/i18n/website.pot
index 6a299039785..9a95ece68d3 100644
--- a/addons/website/i18n/website.pot
+++ b/addons/website/i18n/website.pot
@@ -1947,6 +1947,13 @@ msgstr ""
 msgid "Check your configuration."
 msgstr ""
 
+#. module: website
+#. openerp-web
+#: code:addons/website/static/src/js/editor/snippets.editor.js:0
+#, python-format
+msgid "Check your connexion and try again"
+msgstr ""
+
 #. module: website
 #: model_terms:ir.ui.view,arch_db:website.s_product_catalog
 msgid "Cheese Onion Rings"
@@ -3188,6 +3195,13 @@ msgstr ""
 msgid "Enable billing on your Google Project"
 msgstr ""
 
+#. module: website
+#. openerp-web
+#: code:addons/website/static/src/js/editor/snippets.editor.js:0
+#, python-format
+msgid "Enter an API Key"
+msgstr ""
+
 #. module: website
 #. openerp-web
 #: code:addons/website/static/src/js/editor/snippets.options.js:0
@@ -4345,6 +4359,13 @@ msgstr ""
 msgid "Intuitive system"
 msgstr ""
 
+#. module: website
+#. openerp-web
+#: code:addons/website/static/src/js/editor/snippets.editor.js:0
+#, python-format
+msgid "Invalid API Key. The following error was returned by Google:"
+msgstr ""
+
 #. module: website
 #: model_terms:ir.ui.view,arch_db:website.s_company_team
 msgid "Iris Joe, CFO"
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index 480128374de..9e89b2b133a 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -70,17 +70,45 @@ weSnippetEditor.SnippetsMenu.include({
                 size: 'medium',
                 title: _t("Google Map API Key"),
                 buttons: [
-                    {text: _t("Save"), classes: 'btn-primary', close: true, click: async () => {
-                        const newAPIKey = dialog.$('#api_key_input').val() || false;
-                        await this._rpc({
-                            model: 'website',
-                            method: 'write',
-                            args: [
-                                [websiteId],
-                                {google_maps_api_key: newAPIKey},
-                            ],
-                        });
-                        invalidated = true;
+                    {text: _t("Save"), classes: 'btn-primary', click: async (ev) => {
+                        const $apiKeyInput = dialog.$('#api_key_input');
+                        const valueAPIKey = $apiKeyInput.val();
+                        const $apiKeyHelp = dialog.$('#api_key_help');
+                        if (!valueAPIKey) {
+                            $apiKeyInput.addClass('is-invalid');
+                            $apiKeyHelp.text(_t("Enter an API Key"));
+                            return;
+                        }
+                        const $button = $(ev.currentTarget);
+                        $button.prop('disabled', true);
+                        try {
+                            const response = await fetch(`https://maps.googleapis.com/maps/api/staticmap?center=belgium&size=10x10&key=${valueAPIKey}`);
+                            if (response.status === 200) {
+                                await this._rpc({
+                                    model: 'website',
+                                    method: 'write',
+                                    args: [
+                                        [websiteId],
+                                        {google_maps_api_key: valueAPIKey},
+                                    ],
+                                });
+                                invalidated = true;
+                                dialog.close();
+                            } else {
+                                const text = await response.text();
+                                $apiKeyInput.addClass('is-invalid');
+                                $apiKeyHelp.empty().text(
+                                    _t("Invalid API Key. The following error was returned by Google:")
+                                ).append($('<i/>', {
+                                    text: text,
+                                    class: 'ml-1',
+                                }));
+                            }
+                        } catch (e) {
+                            $apiKeyHelp.text(_t("Check your connection and try again"));
+                        } finally {
+                            $button.prop("disabled", false);
+                        }
                     }},
                     {text: _t("Cancel"), close: true}
                 ],
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 658b10225f4..8210ce6930c 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -120,6 +120,8 @@
                            t-att-value="apiKey or ''"
                            placeholder="BSgzTvR5L1GB9jriT451iTN4huVPxHmltG6T6eo"/>
                 </div>
+                <small id="api_key_help" class="text-danger">
+                </small>
                 <div class="small form-text text-muted">
                     Hint: How to use Google Map on your website (Contact Us page and as a snippet)
                     <br/>