0👍
✅
The problem was solved
i am adding the watch function for watching the newPath
inside the polygon components. So, this is the code :
<script>
export default {
name: "MapPolygon",
props: {
google: {
type: Object,
required: true
},
map: {
type: Object,
required: true
},
paths: {
type: Array,
required: true
}
},
watch: {
async paths (newPaths) {
const { Polygon } = this.google.maps;
let polygon = new Polygon({
paths: newPaths,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
polygon.setMap(this.map);
}
},
mounted() {
const { Polygon } = this.google.maps;
new Polygon({
paths: this.paths,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: this.map,
});
},
render() {}
}
</script>
Source:stackexchange.com