feat(google-maps): support transitions with data-state

Author: harlan-zw

docs/content/scripts/google-maps/1.guides/2.map-styling.md

@@ -14,11 +14,31 @@ Styles automatically apply to both the static map placeholder and the interactiv
 <script setup lang="ts">
 const mapOptions = {
   styles: [
-    { elementType: 'labels', stylers: [{ visibility: 'off' }, { color: '#f49f53' }] },
-    { featureType: 'landscape', stylers: [{ color: '#f9ddc5' }, { lightness: -7 }] },
-    { featureType: 'road', stylers: [{ color: '#813033' }, { lightness: 43 }] },
-    { featureType: 'water', stylers: [{ color: '#1994bf' }, { saturation: -69 }, { gamma: 0.99 }, { lightness: 43 }] },
-    { featureType: 'poi.park', stylers: [{ color: '#645c20' }, { lightness: 39 }] },
+    {
+      elementType: 'labels',
+      stylers: [{ visibility: 'off' }, { color: '#f49f53' }],
+    },
+    {
+      featureType: 'landscape',
+      stylers: [{ color: '#f9ddc5' }, { lightness: -7 }],
+    },
+    {
+      featureType: 'road',
+      stylers: [{ color: '#813033' }, { lightness: 43 }],
+    },
+    {
+      featureType: 'water',
+      stylers: [
+        { color: '#1994bf' },
+        { saturation: -69 },
+        { gamma: 0.99 },
+        { lightness: 43 },
+      ],
+    },
+    {
+      featureType: 'poi.park',
+      stylers: [{ color: '#645c20' }, { lightness: 39 }],
+    },
   ],
 }
 </script>

docs/content/scripts/google-maps/1.guides/4.markers-and-info-windows.md

@@ -9,6 +9,12 @@ title: "Example: Markers & Info Windows"
 ```vue [Source]
 <script setup lang="ts">
 const showPopup = ref(false)
+
+const greenPin = {
+  background: '#34a853',
+  borderColor: '#1e8e3e',
+  glyphColor: '#fff',
+}
 </script>
 
 <template>
@@ -23,7 +29,7 @@ const showPopup = ref(false)
 
     <!-- Colored pin -->
     <ScriptGoogleMapsAdvancedMarkerElement :position="{ lat: -33.8523, lng: 151.2108 }">
-      <ScriptGoogleMapsPinElement :options="{ background: '#34a853', borderColor: '#1e8e3e', glyphColor: '#fff' }" />
+      <ScriptGoogleMapsPinElement :options="greenPin" />
     </ScriptGoogleMapsAdvancedMarkerElement>
 
     <!-- Custom HTML marker with popup -->
@@ -36,7 +42,11 @@ const showPopup = ref(false)
           $1.2M
         </div>
       </template>
-      <ScriptGoogleMapsOverlayView v-model:open="showPopup" anchor="bottom-center" :offset="{ x: 0, y: -40 }">
+      <ScriptGoogleMapsOverlayView
+        v-model:open="showPopup"
+        anchor="bottom-center"
+        :offset="{ x: 0, y: -40 }"
+      >
         <div class="bg-white p-3 px-4 rounded-lg shadow-lg max-w-[200px]">
           <strong>Town Hall</strong>
           <p>3 bed, 2 bath apartment</p>
@@ -72,17 +82,28 @@ const showPopup = ref(false)
 Use `ScriptGoogleMapsPinElement` to customize the pin appearance while keeping the standard shape.
 
 ```vue
+<script setup lang="ts">
+const redPin = {
+  background: '#FF0000',
+  borderColor: '#CC0000',
+  glyphColor: '#FFFFFF',
+  scale: 1.2,
+}
+
+const bluePin = {
+  background: '#4285F4',
+  borderColor: '#1a73e8',
+  glyphColor: '#FFFFFF',
+}
+</script>
+
 <template>
   <ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
     <ScriptGoogleMapsAdvancedMarkerElement :position="{ lat: -33.8568, lng: 151.2153 }">
-      <ScriptGoogleMapsPinElement
-        :options="{ background: '#FF0000', borderColor: '#CC0000', glyphColor: '#FFFFFF', scale: 1.2 }"
-      />
+      <ScriptGoogleMapsPinElement :options="redPin" />
     </ScriptGoogleMapsAdvancedMarkerElement>
     <ScriptGoogleMapsAdvancedMarkerElement :position="{ lat: -33.8688, lng: 151.2093 }">
-      <ScriptGoogleMapsPinElement
-        :options="{ background: '#4285F4', borderColor: '#1a73e8', glyphColor: '#FFFFFF' }"
-      />
+      <ScriptGoogleMapsPinElement :options="bluePin" />
     </ScriptGoogleMapsAdvancedMarkerElement>
   </ScriptGoogleMaps>
 </template>

docs/content/scripts/google-maps/1.guides/5.shapes-and-overlays.md

@@ -14,22 +14,56 @@ const routePath = [
   { lat: -33.8650, lng: 151.2090 },
   { lat: -33.8688, lng: 151.2093 },
 ]
+
+const circleOptions = {
+  center: { lat: -33.8688, lng: 151.2093 },
+  radius: 800,
+  fillColor: '#4285F4',
+  fillOpacity: 0.12,
+  strokeColor: '#4285F4',
+  strokeWeight: 2,
+}
+
+const polygonOptions = {
+  paths: [
+    { lat: -33.852, lng: 151.213 },
+    { lat: -33.850, lng: 151.220 },
+    { lat: -33.856, lng: 151.222 },
+    { lat: -33.858, lng: 151.215 },
+  ],
+  fillColor: '#34a853',
+  fillOpacity: 0.15,
+  strokeColor: '#34a853',
+  strokeWeight: 2,
+}
+
+const polylineOptions = {
+  path: routePath,
+  strokeColor: '#ea4335',
+  strokeOpacity: 1.0,
+  strokeWeight: 3,
+}
+
+const rectangleOptions = {
+  bounds: {
+    north: -33.870,
+    south: -33.878,
+    east: 151.218,
+    west: 151.200,
+  },
+  fillColor: '#fbbc04',
+  fillOpacity: 0.15,
+  strokeColor: '#fbbc04',
+  strokeWeight: 2,
+}
 </script>
 
 <template>
   <ScriptGoogleMaps :center="{ lat: -33.863, lng: 151.210 }" :zoom="14">
-    <ScriptGoogleMapsCircle
-      :options="{ center: { lat: -33.8688, lng: 151.2093 }, radius: 800, fillColor: '#4285F4', fillOpacity: 0.12, strokeColor: '#4285F4', strokeWeight: 2 }"
-    />
-    <ScriptGoogleMapsPolygon
-      :options="{ paths: [{ lat: -33.852, lng: 151.213 }, { lat: -33.850, lng: 151.220 }, { lat: -33.856, lng: 151.222 }, { lat: -33.858, lng: 151.215 }], fillColor: '#34a853', fillOpacity: 0.15, strokeColor: '#34a853', strokeWeight: 2 }"
-    />
-    <ScriptGoogleMapsPolyline
-      :options="{ path: routePath, strokeColor: '#ea4335', strokeOpacity: 1.0, strokeWeight: 3 }"
-    />
-    <ScriptGoogleMapsRectangle
-      :options="{ bounds: { north: -33.870, south: -33.878, east: 151.218, west: 151.200 }, fillColor: '#fbbc04', fillOpacity: 0.15, strokeColor: '#fbbc04', strokeWeight: 2 }"
-    />
+    <ScriptGoogleMapsCircle :options="circleOptions" />
+    <ScriptGoogleMapsPolygon :options="polygonOptions" />
+    <ScriptGoogleMapsPolyline :options="polylineOptions" />
+    <ScriptGoogleMapsRectangle :options="rectangleOptions" />
   </ScriptGoogleMaps>
 </template>
 ```
@@ -41,20 +75,24 @@ All shape components are placed inside `<ScriptGoogleMaps>`{lang="html"} and acc
 ## Circle: Delivery Radius
 
 ```vue
+<script setup lang="ts">
+const center = { lat: -33.8688, lng: 151.2093 }
+
+const circleOptions = {
+  center,
+  radius: 2000,
+  fillColor: '#4285F4',
+  fillOpacity: 0.15,
+  strokeColor: '#4285F4',
+  strokeOpacity: 0.8,
+  strokeWeight: 2,
+}
+</script>
+
 <template>
-  <ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
-    <ScriptGoogleMapsAdvancedMarkerElement :position="{ lat: -33.8688, lng: 151.2093 }" />
-    <ScriptGoogleMapsCircle
-      :options="{
-        center: { lat: -33.8688, lng: 151.2093 },
-        radius: 2000,
-        fillColor: '#4285F4',
-        fillOpacity: 0.15,
-        strokeColor: '#4285F4',
-        strokeOpacity: 0.8,
-        strokeWeight: 2,
-      }"
-    />
+  <ScriptGoogleMaps :center="center" :zoom="13">
+    <ScriptGoogleMapsAdvancedMarkerElement :position="center" />
+    <ScriptGoogleMapsCircle :options="circleOptions" />
   </ScriptGoogleMaps>
 </template>
 ```
@@ -70,19 +108,19 @@ const zoneBoundary = [
   { lat: -33.878, lng: 151.205 },
   { lat: -33.870, lng: 151.195 },
 ]
+
+const polygonOptions = {
+  paths: zoneBoundary,
+  fillColor: '#34a853',
+  fillOpacity: 0.2,
+  strokeColor: '#34a853',
+  strokeWeight: 2,
+}
 </script>
 
 <template>
   <ScriptGoogleMaps :center="{ lat: -33.865, lng: 151.210 }" :zoom="14">
-    <ScriptGoogleMapsPolygon
-      :options="{
-        paths: zoneBoundary,
-        fillColor: '#34a853',
-        fillOpacity: 0.2,
-        strokeColor: '#34a853',
-        strokeWeight: 2,
-      }"
-    />
+    <ScriptGoogleMapsPolygon :options="polygonOptions" />
   </ScriptGoogleMaps>
 </template>
 ```
@@ -97,23 +135,26 @@ const routePath = [
   { lat: -33.8650, lng: 151.2090 },
   { lat: -33.8688, lng: 151.2093 },
 ]
+
+const polylineOptions = {
+  path: routePath,
+  strokeColor: '#ea4335',
+  strokeOpacity: 1.0,
+  strokeWeight: 3,
+}
+
+const startPin = { background: '#34a853' }
+const endPin = { background: '#ea4335' }
 </script>
 
 <template>
   <ScriptGoogleMaps :center="{ lat: -33.862, lng: 151.212 }" :zoom="15">
-    <ScriptGoogleMapsPolyline
-      :options="{
-        path: routePath,
-        strokeColor: '#ea4335',
-        strokeOpacity: 1.0,
-        strokeWeight: 3,
-      }"
-    />
+    <ScriptGoogleMapsPolyline :options="polylineOptions" />
     <ScriptGoogleMapsAdvancedMarkerElement :position="routePath[0]">
-      <ScriptGoogleMapsPinElement :options="{ background: '#34a853' }" />
+      <ScriptGoogleMapsPinElement :options="startPin" />
     </ScriptGoogleMapsAdvancedMarkerElement>
     <ScriptGoogleMapsAdvancedMarkerElement :position="routePath[routePath.length - 1]">
-      <ScriptGoogleMapsPinElement :options="{ background: '#ea4335' }" />
+      <ScriptGoogleMapsPinElement :options="endPin" />
     </ScriptGoogleMapsAdvancedMarkerElement>
   </ScriptGoogleMaps>
 </template>
@@ -122,22 +163,24 @@ const routePath = [
 ## Rectangle: Bounding Box
 
 ```vue
+<script setup lang="ts">
+const rectangleOptions = {
+  bounds: {
+    north: -33.855,
+    south: -33.875,
+    east: 151.225,
+    west: 151.195,
+  },
+  fillColor: '#fbbc04',
+  fillOpacity: 0.15,
+  strokeColor: '#fbbc04',
+  strokeWeight: 2,
+}
+</script>
+
 <template>
   <ScriptGoogleMaps :center="{ lat: -33.865, lng: 151.210 }" :zoom="14">
-    <ScriptGoogleMapsRectangle
-      :options="{
-        bounds: {
-          north: -33.855,
-          south: -33.875,
-          east: 151.225,
-          west: 151.195,
-        },
-        fillColor: '#fbbc04',
-        fillOpacity: 0.15,
-        strokeColor: '#fbbc04',
-        strokeWeight: 2,
-      }"
-    />
+    <ScriptGoogleMapsRectangle :options="rectangleOptions" />
   </ScriptGoogleMaps>
 </template>
 ```
@@ -167,26 +210,38 @@ const geoJson = {
     },
   ],
 }
+
+const geoJsonStyle = {
+  fillColor: '#4285F4',
+  fillOpacity: 0.3,
+  strokeColor: '#4285F4',
+  strokeWeight: 2,
+}
 </script>
 
 <template>
   <ScriptGoogleMaps :center="{ lat: -33.885, lng: 151.225 }" :zoom="13">
-    <ScriptGoogleMapsGeoJson
-      :src="geoJson"
-      :style="{ fillColor: '#4285F4', fillOpacity: 0.3, strokeColor: '#4285F4', strokeWeight: 2 }"
-    />
+    <ScriptGoogleMapsGeoJson :src="geoJson" :style="geoJsonStyle" />
   </ScriptGoogleMaps>
 </template>
 ```
 
 ### Remote URL
 
 ```vue
+<script setup lang="ts">
+const geoJsonStyle = {
+  fillColor: '#34a853',
+  fillOpacity: 0.2,
+  strokeWeight: 1,
+}
+</script>
+
 <template>
   <ScriptGoogleMaps :center="{ lat: -33.885, lng: 151.225 }" :zoom="10">
     <ScriptGoogleMapsGeoJson
       src="https://example.com/boundaries.geojson"
-      :style="{ fillColor: '#34a853', fillOpacity: 0.2, strokeWeight: 1 }"
+      :style="geoJsonStyle"
     />
   </ScriptGoogleMaps>
 </template>