How to dynamically add new polygons on click?

[MrMineToons]

Hello, I'm learning how to use vue, nuxt and this library, I'm trying to add a new polygon on click. The problem I'm facing is that the map doesnt show the path I have clicked.

I'm using: Nuxi 3.2.3, Nuxt 3.2.3 with Nitro 2.2.3 "vue-google-maps-community-fork": "^0.3.1"

What I'm doing: I created a function for GMapMap using @click="showPath". The function showPath get the latitude and longitude clicked, and then add it to my polygons[1], which I'm using for 'GMapPolygon v-for="polygon in polygons" '

What I expected: To show a new polygon dot on my map

What happens: The new polygon is not showing, and sometimes they show when nuxt hot reloaded (saving the code to hot reload).

I'm pretty sure I'm doing something wrong. I saw that we have WATCH() function, but I wasn't able to use it to update the polygon paths. I also know that we have @paths_changed property, but also it didn't worked for me.

So, how to use this library to add new polygon clicking on map?

My Code

``` ```

Thanks in advance!

[MrMineToons]

I saw that the hot reload only shows the new path if I create 'polygons' using => const polygons = useState('myPolygons', () => [...] instead of const polygons = ref([...])

edit: Sorry I wrongly closed it

[NathanAP]

Hello! Sorry for the delay answering you.

I believe you tested a lot of stuff already, but just to be sure: your polygons variable being changed normally, right? did you try to add in other ways? e.g: by clicking on a button

[MrMineToons]

Hello! No problem!

Thanks, now I can add new polygons, i'm understanding how to use the library now.

I added a new button like the following: https://vue-google-maps-community-fork.netlify.app/examples/how-to-add-a-custom-button-to-map.html

Inside the button click function, I'm using like that:

controlUI2.addEventListener('click', () => {
        const point = map.getCenter()
        const size = { lat: point['lat'](), lng: point['lng']() }

        const newPolygon = new google.maps.Polygon({
            paths: [size, size],
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            editable: true,
            draggable: true,
        });
        newPolygon.setMap(map);
    })

    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlUI2)

I also have being following this docs: https://developers.google.com/maps/documentation/javascript/shapes?hl=pt-br

that is it, thanks for helping!

[NathanAP]

Nice! Good to know you're getting it in your own pace :) If there is something else we can help you, let us know!

Good luck with your projects :)