fix(v3): fix reactivity problems with google maps objects (#303)

fix: #301

packages/v3/cypress/e2e/marker-icon.cy.ts

@@ -1,22 +1,52 @@
 describe('MarkerIcon component', () => {
-  it('should add 2 markers on the map', function () {
+  it('should add 4 markers on the map', function () {
     cy.visit('/');
     cy.get('button[name=marker]').click();
-    cy.get('.gmv-map').find('map').should('have.length', 2);
+    cy.get('.gmv-map').find('map').should('have.length', 4);
   });
 
-  it('should remove all markers from the map', function () {
+  it('should hide 2 markers from the map', function () {
     cy.visit('/');
     cy.get('button[name=marker]').click();
     cy.get('#visibility').click();
-    cy.get('.gmv-map').find('map').should('have.length', 0);
+    cy.get('.gmv-map').find('map').should('have.length', 2);
   });
 
-  it('should re-add all markers on the map', function () {
+  it('should make visible again the 2 hidden markers on the map', function () {
     cy.visit('/');
     cy.get('button[name=marker]').click();
     cy.get('#visibility').click();
     cy.get('#visibility').click();
+    cy.get('.gmv-map').find('map').should('have.length', 4);
+  });
+
+  it('should destroy 2 markers from the map', function () {
+    cy.visit('/');
+    cy.get('button[name=marker]').click();
+    cy.get('#visibility2').click();
     cy.get('.gmv-map').find('map').should('have.length', 2);
   });
+
+  it('should re-build the 2 destroyed markers on the map', function () {
+    cy.visit('/');
+    cy.get('button[name=marker]').click();
+    cy.get('#visibility2').click();
+    cy.get('#visibility2').click();
+    cy.get('.gmv-map').find('map').should('have.length', 4);
+  });
+
+  it('should empty the markers array from the map removing 2 of the 4 markers', function () {
+    cy.visit('/');
+    cy.get('button[name=marker]').click();
+    cy.get('#empty').click();
+    cy.get('.gmv-map').find('map').should('have.length', 2);
+  });
+
+  it('should fill the markers array from the map adding the 2 removed markers', function () {
+    cy.visit('/');
+    cy.get('button[name=marker]').click();
+    cy.get('#empty').click();
+    cy.get('#empty').click();
+    cy.get('.gmv-map').find('map').should('have.length', 4);
+  });
 });

packages/v3/cypress/runner/components/ClusterTest.vue

@@ -16,6 +16,9 @@
 </template>
 
 <script>
+// to use with `pnpm run dev` import from '../../../src/main'
+// to use with `pnpm run test:e2e` import from '../../../dist/main.es'
+// to use with `pnpm run test:e2e:ci` import from '../../../dist/main.es'
 import { components } from '../../../dist/main.es';
 
 const { Cluster } = components;

packages/v3/cypress/runner/components/MarkerTest.vue

@@ -2,8 +2,14 @@
   <button id="visibility" type="button" @click="visible = !visible">
     {{ btnTxt }}
   </button>
+  <button id="visibility2" type="button" @click="visible2 = !visible2">
+    {{ btnTxt2 }}
+  </button>
+  <button id="empty" type="button" @click="empty = !empty">
+    {{ btnTxt3 }}
+  </button>
   <br /><br />
-  <gmv-map :center="center" :zoom="7" style="width: 100%; height: 500px">
+  <gmv-map :center="center" :zoom="6" style="width: 100%; height: 500px">
     <gmv-marker
       v-for="(m, i) in markers"
       :key="i"
@@ -13,6 +19,22 @@
       @click="center = m.position"
       :visible="visible"
     ></gmv-marker>
+    <gmv-marker
+      v-if="visible2"
+      :key="i"
+      :clickable="true"
+      :draggable="true"
+      :position="markers2[0].position"
+      @click="center = markers2[0].position"
+    ></gmv-marker>
+    <gmv-marker
+      v-if="visible2"
+      :key="i"
+      :clickable="true"
+      :draggable="true"
+      :position="markers2[1].position"
+      @click="center = markers2[1].position"
+    ></gmv-marker>
   </gmv-map>
 </template>
 
@@ -21,21 +43,23 @@ export default {
   data() {
     return {
       visible: true,
+      visible2: true,
+      empty: false,
       center: {
         lat: 10.0,
         lng: 10.0,
       },
-      markers: [
+      markers2: [
         {
           position: {
-            lat: 10.0,
-            lng: 10.0,
+            lat: 12.0,
+            lng: 12.0,
           },
         },
         {
           position: {
-            lat: 11.0,
-            lng: 11.0,
+            lat: 13.0,
+            lng: 13.0,
           },
         },
       ],
@@ -45,6 +69,32 @@ export default {
     btnTxt() {
       return this.visible ? 'Hide markers' : 'Show markers';
     },
+    btnTxt2() {
+      return this.visible2 ? 'Destroy markers' : 'Rebuild markers';
+    },
+    btnTxt3() {
+      return this.empty ? 'Empty the markers array' : 'Fill the markers array';
+    },
+    markers() {
+      if (this.empty) {
+        return [];
+      }
+
+      return [
+        {
+          position: {
+            lat: 10.0,
+            lng: 10.0,
+          },
+        },
+        {
+          position: {
+            lat: 11.0,
+            lng: 11.0,
+          },
+        },
+      ];
+    },
   },
 };
 </script>

packages/v3/src/components/autocomplete-input.vue

@@ -19,17 +19,18 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
-import { useGoogleMapsApiPromiseLazy, usePluginOptions } from '@/composables';
 import {
   bindGoogleMapsEventsToVueEventsOnSetup,
   bindPropsWithGoogleMapsSettersAndGettersOnSetup,
   downArrowSimulator,
-  getPropsValuesWithoutOptionsProp,
   getComponentEventsConfig,
   getComponentPropsConfig,
+  getPropsValuesWithoutOptionsProp,
+  useGoogleMapsApiPromiseLazy,
+  usePluginOptions,
 } from '@/composables';
 import type { IAutoCompleteInputVueComponentProps } from '@/interfaces';
+import { onMounted, ref, watch } from 'vue';
 
 /**
  * Autocomplete component
@@ -87,7 +88,7 @@ const emits = defineEmits(getComponentEventsConfig('GmvAutocomplete'));
  * AUTOCOMPLETE
  ******************************************************************************/
 const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.();
-const autoCompleteInstance = ref<google.maps.places.Autocomplete | undefined>();
+let autoCompleteInstance: google.maps.places.Autocomplete | undefined;
 
 /*******************************************************************************
  * COMPUTED
@@ -104,7 +105,7 @@ watch(
   () => props.componentRestrictions,
   (newValue, oldValue) => {
     if (newValue && newValue !== oldValue) {
-      autoCompleteInstance.value?.setComponentRestrictions(newValue);
+      autoCompleteInstance?.setComponentRestrictions(newValue);
     }
   }
 );
@@ -142,7 +143,7 @@ onMounted(() => {
         ...props.options,
       };
 
-      autoCompleteInstance.value = new google.maps.places.Autocomplete(
+      autoCompleteInstance = new google.maps.places.Autocomplete(
         scopedInput,
         autocompleteOptions
       );
@@ -156,35 +157,35 @@ onMounted(() => {
 
       bindPropsWithGoogleMapsSettersAndGettersOnSetup(
         autoCompletePropsConfig,
-        autoCompleteInstance.value,
+        autoCompleteInstance,
         emits,
         props
       );
 
       bindGoogleMapsEventsToVueEventsOnSetup(
         autoCompleteEventsConfig,
-        autoCompleteInstance.value,
+        autoCompleteInstance,
         emits,
         excludedEvents
       );
 
       if (props.setFieldsTo) {
-        autoCompleteInstance.value.setFields(props.setFieldsTo);
+        autoCompleteInstance.setFields(props.setFieldsTo);
       }
 
       /**
        * Not using `bindEvents` because we also want
        * to return the result of `getPlace()`
        */
-      autoCompleteInstance.value.addListener('place_changed', () => {
-        if (autoCompleteInstance.value) {
+      autoCompleteInstance.addListener('place_changed', () => {
+        if (autoCompleteInstance) {
           /**
            * Place change event
            * @event place_changed
            * @property {object} place `this.$autocomplete.getPlace()`
            * @see [Get place information](https://developers.google.com/maps/documentation/javascript/places-autocomplete#get-place-information)
            */
-          emits('place_changed', autoCompleteInstance.value.getPlace());
+          emits('place_changed', autoCompleteInstance.getPlace());
         }
       });
     })

packages/v3/src/components/circle-shape.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { inject, onUnmounted, provide, ref } from 'vue';
-import { $circleShapePromise, $mapPromise } from '@/keys';
 import {
   bindGoogleMapsEventsToVueEventsOnSetup,
   bindPropsWithGoogleMapsSettersAndGettersOnSetup,
-  getPropsValuesWithoutOptionsProp,
   getComponentEventsConfig,
   getComponentPropsConfig,
+  getPropsValuesWithoutOptionsProp,
   usePluginOptions,
 } from '@/composables';
 import type { ICircleShapeVueComponentProps } from '@/interfaces';
+import { $circleShapePromise, $mapPromise } from '@/keys';
+import { inject, onUnmounted, provide } from 'vue';
 
 /**
  * Circle component
@@ -65,7 +65,7 @@ if (!mapPromise) {
  * CIRCLE SHAPE
  ******************************************************************************/
 const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.();
-const circleShapeInstance = ref<google.maps.Circle | undefined>();
+let circleShapeInstance: google.maps.Circle | undefined;
 
 const promise = mapPromise
   ?.then((mapInstance) => {
@@ -82,7 +82,7 @@ const promise = mapPromise
       ...props.options,
     };
 
-    circleShapeInstance.value = new google.maps.Circle(circleShapeOptions);
+    circleShapeInstance = new google.maps.Circle(circleShapeOptions);
 
     const circleShapePropsConfig = getComponentPropsConfig('GmvCircle');
     const circleShapeEventsConfig = getComponentEventsConfig(
@@ -92,18 +92,18 @@ const promise = mapPromise
 
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       circleShapePropsConfig,
-      circleShapeInstance.value,
+      circleShapeInstance,
       emits,
       props
     );
     bindGoogleMapsEventsToVueEventsOnSetup(
       circleShapeEventsConfig,
-      circleShapeInstance.value,
+      circleShapeInstance,
       emits,
       excludedEvents
     );
 
-    return circleShapeInstance.value;
+    return circleShapeInstance;
   })
   .catch((error) => {
     throw error;
@@ -127,8 +127,8 @@ provide($circleShapePromise, promise);
  * HOOKS
  ******************************************************************************/
 onUnmounted(() => {
-  if (circleShapeInstance.value) {
-    circleShapeInstance.value.setMap(null);
+  if (circleShapeInstance) {
+    circleShapeInstance.setMap(null);
   }
 });
 /*******************************************************************************