[Vuejs]-Change polygon option on event. vue google map

by

0👍

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',
            }
  1. 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>
  1. 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.

Leave a comment