Am trying to change the the stroke color of a polygon on mouseover
. The issue is, I don't know/cant find an appropriated documentation on how to access the setOptions
method from events.
<GmapMap ref="google_map" :center="{ lat: 0, lng: -0 }">
<gmap-polygon
v-for="(polygon, i) in polygons"
:key="`polygon-${i}`"
ref="google_map_polygon"
:paths="polygon.vertices"
:options="polygonOptions"
@mouseover="polygonHover"
/>
</GmapMap>
Js
export default {
data: () => ({
polygons: [],
polygonOptions: {
strokeColor: 'transparent',
}
}),
...
methods: {
polygonHover (event) {
// Change strokeColor here.
}
}
}
You can do it with the below steps:
<gmap-polygon
. You can then put methods onmouseover
andmouseout
events.this.$refs.google_map_polygon.$polygonObject
then use thesetOptions()
to set the polygonOptions during the mouseover and mouseout events. On mouseOut you can use the initial value of your polygonOptionsthis.polygon.polygonOptions
:Here's the working code.