Change polygon option on event. vue google map

Question

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.
        }
    }
}

Answer 1

You can do it with the below steps:

1. declare your paths and initial polygonOptions:

polygon: {
            paths: [{
              lat: 1.380,
              lng: 103.800
            }, {
              lat: 1.380,
              lng: 103.810
            }, {
              lat: 1.390,
              lng: 103.810
            }, {
              lat: 1.390,
              lng: 103.800
            }],
            polygonOptions: {
              strokeColor: 'transparent',
            }

2. Map those values in the parameters inside <gmap-polygon . You can then put methods on mouseover and mouseout events.

 <gmap-polygon :paths="polygon.paths" :editable="true" :options="polygon.polygonOptions" @mouseover="changePolygonMouseOver($event)" @mouseout="changePolygonMouseOut()" ref="google_map_polygon">
      </gmap-polygon>

3. Call the polygon object using this.$refs.google_map_polygon.$polygonObject then use the setOptions() to set the polygonOptions during the mouseover and mouseout events. On mouseOut you can use the initial value of your polygonOptions this.polygon.polygonOptions :

     methods: {
          changePolygonMouseOver: function() {
            this.$refs.google_map_polygon.$polygonObject.setOptions({
              strokeColor: 'red',
            })
          },
          changePolygonMouseOut: function() {
            console.log("mouseOut")
            this.$refs.google_map_polygon.$polygonObject.setOptions(this.polygon.polygonOptions)
          }
        }

Here's the working code .