fix: Moves styles from CSS to HTML so HTML can be freestanding. (#948)

willum070 · web-flow · commit 5932920489c6 · 2025-11-17T10:35:46.000-08:00
* fix: Moves styles from CSS to HTML so HTML can be freestanding.

* Remove stylesheet link from index.html

Removed the stylesheet link and inline styles from the HTML file, since the style block takes care of that.

* Reorder script tags in index.html
diff --git a/samples/web-components-markers/index.html b/samples/web-components-markers/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
@@ -8,8 +8,17 @@
 <html>
   <head>
     <title>Add a Map with Markers using HTML</title>
-
-    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <style>
+      gmp-map {
+        height: 100%;
+      }
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
     <script type="module" src="./index.js"></script>
     <script
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
diff --git a/samples/web-components-markers/style.css b/samples/web-components-markers/style.css
@@ -4,21 +4,5 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* [START maps_web_components_markers] */
-/* 
- * Always set the map height explicitly to define the size of the div element
- * that contains the map. 
- */
-gmp-map {
-  height: 100%;
-}
-
-/* 
- * Optional: Makes the sample page fill the window. 
- */
-html,
-body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
+/* Note: This CSS file is intentionally blank. */
 /* [END maps_web_components_markers] */
