Dynamic Polyline Change

[HusamElbashir]

Discussed in https://github.com/inocan-group/vue3-google-map/discussions/241

^{Originally posted by Krada88 March 28, 2024} Hello, Friends. Tell me I have a problem.

I'm doing something like a geotracker, I need to periodically update the Polyline in real time. But I came across the fact that it doesn't work.

Maybe I'm doing something wrong? I will be grateful for the hint. And thanks a lot for earlier.

Here is my code.

I created a small sample code that doesn't work. In real life, the Polyline update should occur when the geolocation is changed, but it doesn't work there either. I deleted the api key from the code =)

<template>
  <GoogleMap
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="3"
  >
    <Polyline :options="flightPath" />
  </GoogleMap>
</template>

<script setup>
import { ref } from 'vue'
import { GoogleMap, Polyline } from 'vue3-google-map'

const center = { lat: 0, lng: -180 }
const flightPlanCoordinates = ref([
  { lat: 37.772, lng: -122.214 },
  { lat: 21.291, lng: -157.821 },
  { lat: -18.142, lng: 178.431 },
  { lat: -27.467, lng: 153.027 },
])
const flightPath = ref({
  path: flightPlanCoordinates.value,
  geodesic: true,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2,
})

const addNewCoordinate = () => {
 
  const newCoordinate = {
    lat: Math.random() * 180 - 90,
    lng: Math.random() * 360 - 180,
  }

  flightPlanCoordinates.value.push(newCoordinate)

  flightPath.value = {
    ...flightPath.value,
    path: flightPlanCoordinates.value,
  }
}

setInterval(addNewCoordinate, 1000)
</script>

```</div>

[Krada88]

Hi. Guys, can you tell me if the problem is solvable? Unfortunately, I can't beat her myself =(

[HusamElbashir]

As a workaround you can create a new path array every time instead of pushing to the old one

const addNewCoordinate = () => {
  const newCoordinate = {
    lat: Math.random() * 180 - 90,
    lng: Math.random() * 360 - 180,
  }

  flightPath.value = {
    ...flightPath.value,
    path: [...flightPath.value.path, newCoordinate],
  }
}

[Krada88]

Thank you very much. It just happened!