unable to set the marker animation on and off as intended

[a8300]

Event xyz is not working? Hello, the code below does not set the marker animation on and off as intended. Here is the code:

<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
      <GMapMarker
          :key="index"
          v-for="(marker, index) in markers"
          :position="marker.position"
          :clickable="true"
          :animation="marker.animation"
          @click="clickedMarker(index)"
      />
   </GMapMap>
</template>
<script setup lang="ts">
let center = { lat: 51.093048, lng: 6.842120 };
let markers = [{animation: 0, "position":{ lat: 51.093048, lng: 6.842120 }}];

const clickedMarker = (index: number) => {
  if (markers[index].animation === 0) {
    markers[index].animation = 1;
  } else {
    markers[index].animation = 0;
  }
};
</script>

Describe the bug

To Reproduce Steps to reproduce the behavior:

1, Copy and paste the code above into the project

2, Install the dependencies and run the project

3., Click on the marker, the marker animation does not start (set to 1). Instead it takes the initial value which is 0.

Expected behavior The marker animation should start (animation should be set to 1).

Desktop (please complete the following information):

• OS: Mac-OS
• Browser Chrome
• Version 125.0.6422.142

Additional context Thank you for your help

[a8300]

Looking at the marker.js code, animation uses a Number class. I tried to initialize animation in my code as a Number but recieved the same result (no marker animation). When clicked, the animation variable in my code changes from zero to one and back to zero.

Code that initializes animation as a Number and sets it to zero then sets it to one if the user clicks on the marker

<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
      <GMapMarker
          :key="index"
          v-for="(marker, index) in markers"
          :position="marker.position"
          :clickable="true"
          :animation="marker.animation"
          @click="clickedMarker(index)"
      />
   </GMapMap>
</template>
<script setup lang="ts">
import { onBeforeMount } from 'vue';

let center = { lat: 51.093048, lng: 6.842120 };
let markers = new Array();
let animation: Number =  new Number(0)

onBeforeMount(() => {
  markers.push({animation: animation, "position":{ lat: 51.093048, lng: 6.842120 }});
})

const clickedMarker = (index: number) => {
  if (markers[index].animation === 0) {
    console.log("animation = 0")
    markers[index].animation = 1;
  } else {
    console.log("animation = 1")
    markers[index].animation = 0;
  }
};

</script>

Code (in the marker.js of the vue-google-maps library) that shows the animation type is a Number

  animation: {
    twoWay: true,
    type: Number,
  },

[a8300]

After receiving some help I managed to resolve the issue, here is the fix.

<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
      <GMapMarker
          :key="index"
          v-for="(marker, index) in markers"
          :position="marker.position"
          :clickable="true"
          :animation="marker.animation"
          @click="clickedMarker(index)"
      />
   </GMapMap>
</template>
<script setup lang="ts">
import { onBeforeMount } from 'vue';
import { ref } from 'vue'
import { Marker } from './Marker'
let center = { lat: 51.093048, lng: 6.842120 };
let markers = ref<Marker[]>([]);

onBeforeMount(() => {
  markers.value.push({ animation: 0, position: { lat: 51.093048, lng: 6.842120 } });
})

const clickedMarker = (index: number) => {
  if (markers.value[index].animation === 0) {
    console.log("animation = 0")
    markers.value[index].animation = 1;
  } else {
    console.log("animation = 1")
    markers.value[index].animation = 0;
  }
};

</script>

Thank you