Show only the last location (Coordinates) sent

#1

I have a Google Map that recive data from a API, and it’s working fine.

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 6.330313,
      lng: -75.557731
    },
    zoom: 8,
  });
  getLocations()
}

const getLocations = () => {
  fetch('https://www.datos.gov.co/resource/g373-n3yy.json')
    .then(response => response.json())
    .then(locations => {
     let locationsInfo = []

      locations.forEach(location => {
        let locationData = {
         position: {
            lat: location.punto.coordinates[1],
            lng: location.punto.coordinates[0]
          },
         name: location.nombre_sede
        }
        locationsInfo.push(locationData)
      })

      dibujarMapa(locationsInfo)
    })
}

const dibujarMapa = (locationsInfo) => {

  map.setCenter(locationsInfo[0].position); 

  let markers = locationsInfo.map(place => {
    return new google.maps.Marker({
      position: place.position,
      map: map, 
      title: place.name
    })
  })
}

Here I get the coordinates that the user sends, and it also works, put a marker, but if you send a second or third time the coordinates, the old ones are kept, I want to only show the last sent location.

<script>

document.addEventListener('DOMContentLoaded', () => {
    Livewire.hook('message.processed', (el, component) => {
        
        let lat = @this.lat

        let lng = @this.lng

        const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";

        var actualMarker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            icon: image,
            map: map,
        });
    })  
})

</script>
#2

Hey, @joebak

I’m not sure if I’m correct or not, but. Maybe you want to reset your properties or unset the last checked cords on the map via $this->reset('') or unset('') if it’s an array of inputs