diff --git a/samples/web-components-map/app/dist/assets/index-Rz0jDNVK.js b/samples/web-components-map/app/dist/assets/index-eXnYF4u5.js
similarity index 100%
rename from samples/web-components-map/app/dist/assets/index-Rz0jDNVK.js
rename to samples/web-components-map/app/dist/assets/index-eXnYF4u5.js
diff --git a/samples/web-components-map/app/dist/assets/index-hqGKW_OM.css b/samples/web-components-map/app/dist/assets/index-hqGKW_OM.css
deleted file mode 100644
index 6960e3d932..0000000000
--- a/samples/web-components-map/app/dist/assets/index-hqGKW_OM.css
+++ /dev/null
@@ -1 +0,0 @@
-#map,body,html{height:100%}body,html{margin:0;padding:0}gmp-map{height:400px}
diff --git a/samples/web-components-map/app/dist/assets/index-sVB_vSq6.css b/samples/web-components-map/app/dist/assets/index-sVB_vSq6.css
new file mode 100644
index 0000000000..62af9f8161
--- /dev/null
+++ b/samples/web-components-map/app/dist/assets/index-sVB_vSq6.css
@@ -0,0 +1 @@
+#map,body,html{height:100%}body,html{margin:0;padding:0}
diff --git a/samples/web-components-map/app/dist/index.html b/samples/web-components-map/app/dist/index.html
index e2364fe2ca..2c6c8b4c0e 100644
--- a/samples/web-components-map/app/dist/index.html
+++ b/samples/web-components-map/app/dist/index.html
@@ -9,10 +9,11 @@
     <title>Add a Map using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 
-    <script type="module" crossorigin src="./assets/index-Rz0jDNVK.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-hqGKW_OM.css">
+    <script type="module" crossorigin src="./assets/index-eXnYF4u5.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-sVB_vSq6.css">
   </head>
   <body>
+    <style>gmp-map{height:400px}</style>
     <gmp-map
       center="37.4220656,-122.0840897"
       zoom="10"
diff --git a/samples/web-components-map/app/index.html b/samples/web-components-map/app/index.html
index 4393b62dc8..d74eafeb95 100644
--- a/samples/web-components-map/app/index.html
+++ b/samples/web-components-map/app/index.html
@@ -13,6 +13,11 @@
     <script type="module" src="./index.ts"></script>
   </head>
   <body>
+    <style>
+      gmp-map {
+        height: 400px;
+      }
+    </style>
     <gmp-map
       center="37.4220656,-122.0840897"
       zoom="10"
diff --git a/samples/web-components-map/app/style.css b/samples/web-components-map/app/style.css
index 582e19d3dd..c97e14e569 100644
--- a/samples/web-components-map/app/style.css
+++ b/samples/web-components-map/app/style.css
@@ -21,7 +21,3 @@ body {
   padding: 0;
 }
 
-gmp-map {
-  height: 400px;
-}
-
diff --git a/samples/web-components-map/docs/index.html b/samples/web-components-map/docs/index.html
index 6be724c12c..5ecb89cb40 100644
--- a/samples/web-components-map/docs/index.html
+++ b/samples/web-components-map/docs/index.html
@@ -14,6 +14,13 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
+    <!-- [START maps_web_components_map_style] -->
+    <style>
+      gmp-map {
+        height: 400px;
+      }
+    </style>
+    <!-- [END maps_web_components_map_style] -->
     <!-- [START maps_web_components_map_gmpmap] -->
     <gmp-map
       center="37.4220656,-122.0840897"
diff --git a/samples/web-components-map/docs/style.css b/samples/web-components-map/docs/style.css
index b56f4370f1..e73990d6b1 100644
--- a/samples/web-components-map/docs/style.css
+++ b/samples/web-components-map/docs/style.css
@@ -22,10 +22,4 @@ body {
   padding: 0;
 }
 
-/* [START maps_web_components_map_style] */
-gmp-map {
-  height: 400px;
-}
-
-/* [END maps_web_components_map_style] */
 /* [END maps_web_components_map] */
\ No newline at end of file
diff --git a/samples/web-components-map/iframe/assets/index-Rz0jDNVK.js b/samples/web-components-map/iframe/assets/index-eXnYF4u5.js
similarity index 100%
rename from samples/web-components-map/iframe/assets/index-Rz0jDNVK.js
rename to samples/web-components-map/iframe/assets/index-eXnYF4u5.js
diff --git a/samples/web-components-map/iframe/assets/index-hqGKW_OM.css b/samples/web-components-map/iframe/assets/index-hqGKW_OM.css
deleted file mode 100644
index 6960e3d932..0000000000
--- a/samples/web-components-map/iframe/assets/index-hqGKW_OM.css
+++ /dev/null
@@ -1 +0,0 @@
-#map,body,html{height:100%}body,html{margin:0;padding:0}gmp-map{height:400px}
diff --git a/samples/web-components-map/iframe/assets/index-sVB_vSq6.css b/samples/web-components-map/iframe/assets/index-sVB_vSq6.css
new file mode 100644
index 0000000000..62af9f8161
--- /dev/null
+++ b/samples/web-components-map/iframe/assets/index-sVB_vSq6.css
@@ -0,0 +1 @@
+#map,body,html{height:100%}body,html{margin:0;padding:0}
diff --git a/samples/web-components-map/iframe/index.html b/samples/web-components-map/iframe/index.html
index eeef700878..598f13f944 100644
--- a/samples/web-components-map/iframe/index.html
+++ b/samples/web-components-map/iframe/index.html
@@ -9,10 +9,15 @@
     <title>Add a Map using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 
-    <script type="module" crossorigin src="./assets/index-Rz0jDNVK.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-hqGKW_OM.css" />
+    <script type="module" crossorigin src="./assets/index-eXnYF4u5.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-sVB_vSq6.css" />
   </head>
   <body>
+    <style>
+      gmp-map {
+        height: 400px;
+      }
+    </style>
     <gmp-map
       center="37.4220656,-122.0840897"
       zoom="10"
diff --git a/samples/web-components-map/jsfiddle/demo.css b/samples/web-components-map/jsfiddle/demo.css
index 582e19d3dd..c97e14e569 100644
--- a/samples/web-components-map/jsfiddle/demo.css
+++ b/samples/web-components-map/jsfiddle/demo.css
@@ -21,7 +21,3 @@ body {
   padding: 0;
 }
 
-gmp-map {
-  height: 400px;
-}
-
diff --git a/samples/web-components-map/jsfiddle/demo.html b/samples/web-components-map/jsfiddle/demo.html
index b585c145d3..1a01797813 100644
--- a/samples/web-components-map/jsfiddle/demo.html
+++ b/samples/web-components-map/jsfiddle/demo.html
@@ -11,6 +11,11 @@
     <!-- jsFiddle will insert css and js -->
   </head>
   <body>
+    <style>
+      gmp-map {
+        height: 400px;
+      }
+    </style>
     <gmp-map
       center="37.4220656,-122.0840897"
       zoom="10"
diff --git a/samples/web-components-map/playground/index.html b/samples/web-components-map/playground/index.html
index ea6ea584dd..de710d8abc 100644
--- a/samples/web-components-map/playground/index.html
+++ b/samples/web-components-map/playground/index.html
@@ -14,6 +14,11 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
+    <style>
+      gmp-map {
+        height: 400px;
+      }
+    </style>
     <gmp-map
       center="37.4220656,-122.0840897"
       zoom="10"
diff --git a/samples/web-components-map/playground/style.css b/samples/web-components-map/playground/style.css
index 5f1dfff74c..a8d59c808e 100644
--- a/samples/web-components-map/playground/style.css
+++ b/samples/web-components-map/playground/style.css
@@ -16,7 +16,3 @@ body {
   padding: 0;
 }
 
-gmp-map {
-  height: 400px;
-}
-
