fix: Updates the CSS style for improved visual appearance. (#1042)

willum070 · web-flow · commit fbc3bd8473ab · 2026-01-14T10:38:19.000-08:00
diff --git a/samples/streetview-overlays/index.html b/samples/streetview-overlays/index.html
@@ -17,9 +17,7 @@
     </head>
     <body>
         <gmp-map map-id="DEMO_MAP_ID" center="40.729884, -73.990988" zoom="18">
-            <div id="floating-panel" slot="control-inline-start-block-start">
-                <input type="button" value="Toggle Street View" id="toggle" />
-            </div>
+            <input type="button" value="Toggle Street View" id="streetview-toggle-button" slot="control-block-start-inline-start" />
         </gmp-map>
     </body>
 </html>
diff --git a/samples/streetview-overlays/index.ts b/samples/streetview-overlays/index.ts
@@ -22,14 +22,9 @@ async function initMap() {
     ) as google.maps.MapElement;
 
     innerMap = mapElement.innerMap;
-    innerMap.setOptions({
-        mapTypeControl: false,
-        streetViewControl: false,
-        fullscreenControl: false,
-    });
 
     document
-        .getElementById('toggle')!
+        .getElementById('streetview-toggle-button')!
         .addEventListener('click', toggleStreetView);
 
     const cafeIcon = document.createElement('img');
diff --git a/samples/streetview-overlays/style.css b/samples/streetview-overlays/style.css
@@ -36,4 +36,27 @@ body {
   padding-left: 10px;
 }
 
+#streetview-toggle-button {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 17px;
+  border: none;
+  background: white;
+  cursor: pointer;
+  border-radius: 2px;
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+  margin: 10px 0px 10px -2px;
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  color: rgb(86, 86, 86);
+}
+
+#streetview-toggle-button:hover {
+  background: #f4f4f4;
+  color: #000;
+}
+
 /* [END maps_streetview_overlays] */
