Switch polygon setting during event on Vue Google Map

Looking for a way to change the stroke color of a polygon when hovering over it. Struggling to locate proper 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) {
           // Implement strokeColor change logic here.
        }
    }
}

Answer №1

If you want to achieve this, follow these steps:

  1. Begin by defining 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. Assign these values within the <gmap-polygon parameters. You can then specify methods for the 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. Access the polygon object using
    this.$refs.google_map_polygon.$polygonObject
    and utilize setOptions() to change the polygonOptions when triggering mouseover and mouseout events. Reset to the original value on mouseout with 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)
          }
        }

Check out the functional code here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a variety of images all in one slider page effortlessly with the ngb-carousel feature

I'm currently utilizing Angular 6 and ng-bootstrap to implement a carousel feature on my website. Although the carousel is functioning correctly, I am facing an issue where only one image is being displayed in each slide instead of four images per sl ...

Displaying a div component in React and Typescript upon clicking an element

I've been working on a to-do list project using React and TypeScript. In order to display my completed tasks, I have added a "done" button to the DOM that triggers a function when clicked. Initially, I attempted to use a useState hook in the function ...

The border style color of the Buefy input does not seem to be able

I was attempting to customize the appearance of a b-input element in buefy, but unfortunately my design changes are not being applied. Below is the code I am currently using: <b-field> <b-input placeholder="Username" size="is-medium" ></b- ...

The back button in Vue.js fails to recognize the created() lifecycle hook

Having an issue with my code in the created lifecycle method: created() { if(!this.$session.exists() && !this.exists) { if(this.$router.currentRoute.path != '/login'){ this.loginAlert = true this.$router.push(&a ...

Leveraging the power of Google Closure Templates alongside the versatility of

We are embarking on developing an application using JavaScript and HTML5 that will utilize a rest API to access server resources, leveraging the power and convenience of jQuery which our development team is already proficient in. Our goal is to make this a ...

Tracking user engagement and traffic on a website with a single tracking ID for both screenviews and pageviews

I'm facing an issue while attempting to send screenviews and pageviews using the same tracking ID in my AngularJS web app. The error message I keep encountering is as follows: Access denied. Please try relaunching In-Page Analytics from the report. ...

Manipulating variables in the main controller scope from a function in a transcluded directive scope using AngularJS

How can parent controller scope variables be updated from a transcluded directive scope's function? I have a situation where I am including directives within another directive using transclusion. Here is an example of how it is set up: <my-table& ...

Global Variables Evolution as Variables are Assigned

So I'm encountering an issue where running a function and assigning variables to the data seems to be updating my global every time. I've double-checked my code, but I can't seem to pinpoint where the update to the global is coming from. Am ...

Validator returns undefined when expressing invalid data

Having an issue with validation, here is the code snippet: routes.js var express = require('express'); var router = express.Router(); var hello_controller = require('../api/controllers/helloController'); var { validationRules, validat ...

Dynamic text display using Bootstrap 3

My current struggle involves the implementation of Bootstrap's collapse class in my project. I am attempting to connect buttons with text located in a separate div in order to properly collapse and display it. While I can easily achieve this in a str ...

Conceal the most recent 2 entries in Angular's ng-repeat

I am currently working with a table that uses the ng-repeat attribute to display data fetched from a web service. Initially, I was able to hide the last record by using ng-hide="$last". However, due to an update in the web service, I now need to hide the l ...

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

The issue arises when trying to use qtip2 in JavaScript upon page initialization

I successfully created a heatmap using JavaScript, utilizing a table with varying colors based on the displayed values' thresholds. To enhance user experience, I wanted to implement a popup window that shows additional information when hovering over a ...

How to prevent the parent element from scrolling when changing the value of a number input by scrolling

Within a container with fixed dimensions and scroll bars that appear when the content size exceeds the container, there is a form. This form contains an input of type "number" which allows changing its value using the mouse wheel. The issue arises when at ...

"Displaying array objects in a select dropdown menu - a step-by-step guide

I need assistance with displaying an array object in a select tag utilizing only AngularJS. Below is the structure of my array object: "matcherObject": { "Percentage Off": [ { "dealType": "Percentage Off", "subCategory": "16% to 20%", "recid ...

Animation issue in Material UI autocomplete label feature

Hello, I am currently delving into the world of React and Material UI. I have been working on implementing the Material UI auto complete feature with chip functionality. You can see my progress here: https://codesandbox.io/s/runh6. Everything seems to be w ...

Utilizing elapsed time in coding to create a function for DOM manipulation

As a new software engineering student, I am facing a challenge that I am struggling to overcome. I am currently working on developing a basic rhythm game similar to Guitar Hero using HTML, CSS, and JavaScript. I have successfully implemented an elapsedTim ...

Removing a document from Firestore using React

Is there a way to delete a document in Firestore without knowing the document ID? If I only have the name of the document, how can I go about deleting it? This is how I currently export the database: export const db = getFirestore(app) I feel like I nee ...

Modify the React MUI GridToolbar's font style

Is there a way to adjust the font size of the GridToolbar? https://mui.com/x/react-data-grid/components/#toolbar <DataGrid {...data} components={{ Toolbar: GridToolbar, }} /> I attempted to change the font size using the following code: & ...

Error: The function $(...).maxlength is not recognized - error in the maxlength plugin counter

I have been attempting to implement the JQuery maxlength() function in a <textarea>, but I keep encountering an error in the firefox console. This is the code snippet: <script type="text/JavaScript"> $(function () { // some jquery ...