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

Author: harlan-zw

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

@@ -274,6 +274,47 @@ function getCenterWatchKey(center: ScriptGoogleMapsCenter): string | undefined {
 returnundefined
 }
 
+const controlledCenterKey =computed(() => {
+returngetCenterWatchKey(centerOverride.value)
+||getCenterWatchKey(props.mapOptions?.center)
+||getCenterWatchKey(props.center)
+})
+
+function getReactiveMapOptions(options:google.maps.MapOptions):google.maps.MapOptions {
+// Exclude center and zoom — they have dedicated watchers that avoid
+// resetting user interactions (pan/zoom) on unrelated re-renders.
+// Exclude mapId and colorScheme — Google Maps treats these as init-only;
+// changes are handled by the dedicated re-init watcher below.
+const { center: _, zoom: __, mapId: ___, colorScheme: ____, ...rest } =options
+returnrest
+}
+
+function isPlainObject(value:unknown):valueisRecord<string, unknown> {
+if (!value||typeofvalue!=='object')
+returnfalse
+const proto =Object.getPrototypeOf(value)
+returnproto===Object.prototype||proto===null
+}
+
+function isSameOptionValue(a:unknown, b:unknown):boolean {
+if (Object.is(a, b))
+returntrue
+if (Array.isArray(a) &&Array.isArray(b)) {
+returna.length===b.length&&a.every((value, index) =>isSameOptionValue(value, b[index]))
+ }
+if (isPlainObject(a) &&isPlainObject(b)) {
+const aKeys =Object.keys(a)
+const bKeys =Object.keys(b)
+returnaKeys.length===bKeys.length
+&&aKeys.every(key=>Object.hasOwn(b, key) &&isSameOptionValue(a[key], b[key]))
+ }
+returnfalse
+}
+
+function isSameMapOptions(a:google.maps.MapOptions, b:google.maps.MapOptions):boolean {
+returnisSameOptionValue(toRaw(a), toRaw(b))
+}
+
 const queryToLatLngCache =newMap<string, google.maps.LatLng|google.maps.LatLngLiteral>()
 
 asyncfunction resolveQueryToLatLng(query:string) {
@@ -401,15 +442,12 @@ onMounted(() => {
 emits('error')
  }
  })
-watch(options, () => {
+watch(() =>getReactiveMapOptions(options.value), (nextOptions, previousOptions) => {
 if (!map.value)
 return
-// Exclude center and zoom — they have dedicated watchers that avoid
-// resetting user interactions (pan/zoom) on unrelated re-renders.
-// Exclude mapId and colorScheme — Google Maps treats these as init-only;
-// changes are handled by the dedicated re-init watcher below.
-const { center: _, zoom: __, mapId: ___, colorScheme: ____, ...rest } =options.value
-map.value.setOptions(rest)
+if (isSameMapOptions(nextOptions, previousOptions))
+return
+map.value.setOptions(nextOptions)
  })
 // Re-init map when mapId or colorScheme changes (e.g. user toggles color mode
 // with `mapIds` set or with cloud-based styling on a single mapId). Both are
@@ -458,16 +496,17 @@ onMounted(() => {
 emits('ready', exposed)
  })
 watch(() =>options.value.zoom, (zoom) => {
-if (map.value&&zoom!=null)
+if (map.value&&zoom!=null) {
 map.value.setZoom(zoom)
+ }
  })
 // 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([() =>getCenterWatchKey(props.center), () =>getCenterWatchKey(props.mapOptions?.center)], () => {
 centerOverride.value=undefined
  })
-watch([() =>getCenterWatchKey(options.value.center), isMapReady, map], async () => {
+watch([controlledCenterKey, isMapReady, map], async () => {
 if (!map.value) {
 return
  }

playground/pages/third-parties/google-maps/sfcs.vue

@@ -92,9 +92,9 @@ whenever(() => googleMapsRef.value?.googleMaps, (googleMaps) => {
  api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
  :width="1280"
  :height="720"
- :zoom="zoom"
  :map-options="{
  center: { lat: -34.397, lng: 150.644 },
+zoom,
  mapId: 'DEMO_MAP_ID',
  }"
  >

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

@@ -337,6 +337,39 @@ describe('google Maps Regressions', () => {
 map.setOptions(rest)
 }
 
+functionisPlainObject(value: unknown): value is Record<string,unknown>{
+if(!value||typeofvalue!=='object')
+returnfalse
+constproto=Object.getPrototypeOf(value)
+returnproto===Object.prototype||proto===null
+}
+
+functionisSameOptionValue(a: unknown,b: unknown): boolean{
+if(Object.is(a,b))
+returntrue
+if(Array.isArray(a)&&Array.isArray(b))
+returna.length===b.length&&a.every((value,index)=>isSameOptionValue(value,b[index]))
+if(isPlainObject(a)&&isPlainObject(b)){
+constaKeys=Object.keys(a)
+constbKeys=Object.keys(b)
+returnaKeys.length===bKeys.length
+&&aKeys.every(key=>Object.hasOwn(b,key)&&isSameOptionValue(a[key],b[key]))
+}
+returnfalse
+}
+
+functionapplyOptionsWithStableGuard(
+map: ReturnType<typeofcreateMockMap>,
+options: Record<string,any>,
+previousOptions: Record<string,any>,
+){
+const{center: _,zoom: __,mapId: ___,colorScheme: ____, ...next}=options
+const{center: _previousCenter,zoom: _previousZoom,mapId: _previousMapId,colorScheme: _previousColorScheme, ...previous}=previousOptions
+if(isSameOptionValue(next,previous))
+return
+map.setOptions(next)
+}
+
 it('old behavior: setOptions resets zoom and center on unrelated re-render',()=>{
 constmap=createMockMap()
 constoptions={center: {lat: 40,lng: -74},zoom: 12,mapId: 'abc'}
@@ -402,6 +435,35 @@ describe('google Maps Regressions', () => {
 expect(map.setCenter).not.toHaveBeenCalled()
 expect(map.setZoom).not.toHaveBeenCalled()
 })
+
+it('fixed behavior: identical inline options do not call setOptions on unrelated re-renders',()=>{
+constmap=createMockMap()
+constbaseOptions={
+center: {lat: 40,lng: -74},
+zoom: 12,
+mapId: 'abc',
+disableDefaultUI: true,
+restriction: {strictBounds: false},
+}
+
+for(leti=0;i<3;i++){
+applyOptionsWithStableGuard(map,{ ...baseOptions,restriction: {strictBounds: false}},baseOptions)
+}
+
+expect(map.setOptions).not.toHaveBeenCalled()
+expect(map.setCenter).not.toHaveBeenCalled()
+expect(map.setZoom).not.toHaveBeenCalled()
+})
+
+it('fixed behavior: real non-position option changes still call setOptions',()=>{
+constmap=createMockMap()
+constpreviousOptions={center: {lat: 40,lng: -74},zoom: 12,mapId: 'abc',disableDefaultUI: true}
+constnextOptions={center: {lat: 40,lng: -74},zoom: 12,mapId: 'abc',disableDefaultUI: false}
+
+applyOptionsWithStableGuard(map,nextOptions,previousOptions)
+
+expect(map.setOptions).toHaveBeenCalledWith({disableDefaultUI: false})
+})
 })
 
 describe('center watcher should skip setCenter when lat/lng unchanged',()=>{
@@ -476,6 +538,40 @@ describe('google Maps Regressions', () => {
 expect(getCenterWatchKey(firstRender.center)).toBe(getCenterWatchKey(secondRender.center))
 })
 
+it('keeps the controlled center watch key stable across unrelated inline option re-renders',()=>{
+functiongetCenterWatchKey(center: any){
+if(!center)
+returnundefined
+constlat=typeofcenter.lat==='function' ? center.lat() : center.lat
+constlng=typeofcenter.lng==='function' ? center.lng() : center.lng
+return`latlng:${lat},${lng}`
+}
+
+functiongetControlledCenterKey(props: {center?: any,mapOptions?: {center?: any}},centerOverride?: any){
+returngetCenterWatchKey(centerOverride)
+||getCenterWatchKey(props.mapOptions?.center)
+||getCenterWatchKey(props.center)
+}
+
+constfirstRender={
+mapOptions: {
+center: {lat: -34.397,lng: 150.644},
+zoom: 8,
+},
+}
+constsecondRenderAfterRectangleToggle={
+mapOptions: {
+center: {lat: -34.397,lng: 150.644},
+zoom: 8,
+},
+}
+
+expect(firstRender.mapOptions).not.toBe(secondRenderAfterRectangleToggle.mapOptions)
+expect(firstRender.mapOptions.center).not.toBe(secondRenderAfterRectangleToggle.mapOptions.center)
+expect(getControlledCenterKey(firstRender))
+.toBe(getControlledCenterKey(secondRenderAfterRectangleToggle))
+})
+
 it('changes the center watch key when coordinates actually change',()=>{
 functiongetCenterWatchKey(center: any){
 constlat=typeofcenter.lat==='function' ? center.lat() : center.lat