Closed itsjms closed 2 years ago
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.
<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>
@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;
}
<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.
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?