How can the marker animation revolve between zero & one

[a8300]

Hello,

How does one get the marker animation to change from zero to one and back to zero again. This is what I have so far:

<script setup lang="ts">
import { GoogleMap, Marker } from 'vue3-google-map'

const center = { lat: 40.689247, lng: -74.044502 }
let markerOptions = { animation: 0, position: center, label: 'L', title: 'LADY LIBERTY' }

const clickedMarker = () => {
  if (markerOptions.animation === 1) {
    markerOptions.animation = 0
  } else {
    markerOptions.animation = 1
  }
  console.log('clicked marker animation equals: ', markerOptions.animation)
};
</script>

<template>
  <GoogleMap
    api-key=""
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
    @click=clickedMarker()
  >
    <Marker :options="markerOptions" />
  </GoogleMap>
</template>

Thank you

[VictorBalbo]

I think there are two problems here.

• In your example you are creating the markerOptions as an object, but if you want it to reflect changes to the component template you should create it as reactive state using the ref function from vue.
• The second problem seems to be the way the component works, for some reason the internal watcher is not being called for a reactive prop when passed directly as a prop (:options="markerOptions") and I have no idea why. If you create an object inside the prop (:options="{ ...markerOptions }" or :options="{ position: center, title: 'LADY LIBERTY', animation: animation, }") it will work, and again I don't know why those two ways are behaving differenly. My suggestion, until someone take a look at this, is to create your object as a reactive state and pass it as with a spread operator. Example:

  
  <script setup lang="ts">
  import { GoogleMap, Marker } from 'vue3-google-map'
  import { ref } from 'vue'

const center = { lat: 40.689247, lng: -74.044502 } let markerOptions = ref({ animation: 0, position: center, label: 'L', title: 'LADY LIBERTY' })

const clickedMarker = () => { if (markerOptions.value.animation === 1) { markerOptions.value.animation = 0 } else { markerOptions.value.animation = 1 } console.log('clicked marker animation equals: ', markerOptions.value.animation) }

[a8300]

Thank you. I'll incorporate your changes and continue working on it.

[a8300]

Thank you for your help. Your response helped me resolve the error in another library.