fix(google-maps): avoid recentering google maps on inline options (#740)

Author: harlan-zw

packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue

@@ -259,6 +259,21 @@ function isLocationQuery(s: string | any) {
   return typeof s === 'string' && (s.split(',').length > 2 || s.includes('+'))
 }
 
+type ScriptGoogleMapsCenter = ScriptGoogleMapsProps['center'] | google.maps.MapOptions['center']
+
+function getCenterWatchKey(center: ScriptGoogleMapsCenter): string | undefined {
+  const raw = toRaw(center)
+  if (!raw)
+    return undefined
+  if (typeof raw === 'string')
+    return `query:${raw}`
+  const lat = typeof (raw as any).lat === 'function' ? (raw as any).lat() : (raw as any).lat
+  const lng = typeof (raw as any).lng === 'function' ? (raw as any).lng() : (raw as any).lng
+  if (lat != null && lng != null)
+    return `latlng:${lat},${lng}`
+  return undefined
+}
+
 const queryToLatLngCache = new Map<string, google.maps.LatLng | google.maps.LatLngLiteral>()
 
 async function resolveQueryToLatLng(query: string) {
@@ -449,14 +464,14 @@ onMounted(() => {
   // Clear centerOverride when the controlled center prop changes so external
   // updates take effect (otherwise centerOverride, written from the user's
   // pan during re-init, would permanently win over future prop updates).
-  watch([() => props.center, () => props.mapOptions?.center], () => {
+  watch([() => getCenterWatchKey(props.center), () => getCenterWatchKey(props.mapOptions?.center)], () => {
     centerOverride.value = undefined
   })
-  watch([() => options.value.center, isMapReady, map], async (next) => {
+  watch([() => getCenterWatchKey(options.value.center), isMapReady, map], async () => {
     if (!map.value) {
       return
     }
-    let center = toRaw(next[0])
+    let center = toRaw(options.value.center)
     if (center) {
       if (isLocationQuery(center) && isMapReady.value) {
         center = await resolveQueryToLatLng(center as string)

test/unit/google-maps-regressions.test.ts

@@ -455,6 +455,38 @@ describe('google Maps Regressions', () => {
 
       expect(map.setCenter).not.toHaveBeenCalled()
     })
+
+    it('uses a stable center watch key for equivalent inline mapOptions centers', () => {
+      function getCenterWatchKey(center: any) {
+        if (!center)
+          return undefined
+        if (typeof center === 'string')
+          return `query:${center}`
+        const lat = typeof center.lat === 'function' ? center.lat() : center.lat
+        const lng = typeof center.lng === 'function' ? center.lng() : center.lng
+        if (lat != null && lng != null)
+          return `latlng:${lat},${lng}`
+        return center
+      }
+
+      const firstRender = { center: { lat: -34.397, lng: 150.644 }, zoom: 8 }
+      const secondRender = { center: { lat: -34.397, lng: 150.644 }, zoom: 8 }
+
+      expect(firstRender.center).not.toBe(secondRender.center)
+      expect(getCenterWatchKey(firstRender.center)).toBe(getCenterWatchKey(secondRender.center))
+    })
+
+    it('changes the center watch key when coordinates actually change', () => {
+      function getCenterWatchKey(center: any) {
+        const lat = typeof center.lat === 'function' ? center.lat() : center.lat
+        const lng = typeof center.lng === 'function' ? center.lng() : center.lng
+        return `latlng:${lat},${lng}`
+      }
+
+      expect(getCenterWatchKey({ lat: -34.397, lng: 150.644 }))
+        .not
+        .toBe(getCenterWatchKey({ lat: -34.387, lng: 150.654 }))
+    })
   })
 
   describe('infoWindow group close', () => {