Can you access the Marker class instance from a CustomMarker somehow?

[itsjms]

I have a CustomMarker in Vue3. I am trying to access the Marker class upon hovering on a CustomMarker so I can set the zIndex to a higher value. Is this possible?

[itsjms]

My solution to this was to create another component that embeds CustomMarker and takes a slot. I can then dynamically apply zIndex option as needed.

[itsjms]

<template>
  <CustomMarker @mouseover="mouseOver = true" @mouseleave="mouseOver = false" :options="customMarkerOptions">
    <slot></slot>
  </CustomMarker>
</template>

<script>
import { 
  CustomMarker
} from 'vue3-google-map';

export default {
  components: {
    CustomMarker
  },
  props: ['position'],
  data: function() {
    return {
      mouseOver: false
    }
  },
  computed: {
    customMarkerOptions() {
      return {
        position: this.position, 
        anchorPoint: 'CENTER',
        zIndex: this.mouseOver ? 2 : 1
      }
    }
  }
}
</script>

[HusamElbashir]

@itsjms I suspect you can just use a class on the custom marker that sets z-index on hover. Something like this:

.custom-marker:hover {
  z-index: 999 !important;
}

[serdarcevher]

<template>
  <CustomMarker @mouseover="mouseOver = true" @mouseleave="mouseOver = false" :options="customMarkerOptions">
    <slot></slot>
  </CustomMarker>
</template>

<script>
import { 
  CustomMarker
} from 'vue3-google-map';

export default {
  components: {
    CustomMarker
  },
  props: ['position'],
  data: function() {
    return {
      mouseOver: false
    }
  },
  computed: {
    customMarkerOptions() {
      return {
        position: this.position, 
        anchorPoint: 'CENTER',
        zIndex: this.mouseOver ? 2 : 1
      }
    }
  }
}
</script>

Thank you, this solution saved me. Using the styling doesn't work for me.