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) {
 returntypeofs==='string'&& (s.split(',').length>2||s.includes('+'))
 }
 
+typeScriptGoogleMapsCenter=ScriptGoogleMapsProps['center'] |google.maps.MapOptions['center']
+
+function getCenterWatchKey(center:ScriptGoogleMapsCenter):string|undefined {
+const raw =toRaw(center)
+if (!raw)
+returnundefined
+if (typeofraw==='string')
+return`query:${raw}`
+const lat =typeof (rawasany).lat==='function'? (rawasany).lat() : (rawasany).lat
+const lng =typeof (rawasany).lng==='function'? (rawasany).lng() : (rawasany).lng
+if (lat!=null&&lng!=null)
+return`latlng:${lat},${lng}`
+returnundefined
+}
+
 const queryToLatLngCache =newMap<string, google.maps.LatLng|google.maps.LatLngLiteral>()
 
 asyncfunction 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=awaitresolveQueryToLatLng(centerasstring)

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',()=>{
+functiongetCenterWatchKey(center: any){
+if(!center)
+returnundefined
+if(typeofcenter==='string')
+return`query:${center}`
+constlat=typeofcenter.lat==='function' ? center.lat() : center.lat
+constlng=typeofcenter.lng==='function' ? center.lng() : center.lng
+if(lat!=null&&lng!=null)
+return`latlng:${lat},${lng}`
+returncenter
+}
+
+constfirstRender={center: {lat: -34.397,lng: 150.644},zoom: 8}
+constsecondRender={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',()=>{
+functiongetCenterWatchKey(center: any){
+constlat=typeofcenter.lat==='function' ? center.lat() : center.lat
+constlng=typeofcenter.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',()=>{