Lightning-map is not getting updated as I am updating the map-marker through JS in LWC

Question

On a click of a button I am setting the latitude and longitude in the map-marker but lightning-map is updating/refreshing. Here is the code: HTML:

<template>
<lightning-button label='Click' onclick={handleClick}></lightning-button>
    <lightning-map
        map-markers={mapMarkers}
    >
  </lightning-map>
</template>

JS:

import { LightningElement, track } from 'lwc';

export default class Lwc_map extends LightningElement {

   
    @track mapMarkers=[];

    handleClick(event){
        this.mapMarkers={
            location: {
                Latitude: '28.535517',
                Longitude: '77.39103',
                
            }
        
        }
        window.console.log('Set'+ JSON.stringify(this.mapMarkers));
    }
}

Pls,suggest me method how i can update lightning-map on a click in lwc.

Answer 1

mapMarkers is an array so you should put the content like this

 this.mapMarkers = [...this.mapMarkers, {
            location: {
                Latitude: '28.535517',
                Longitude: '77.39103',
                
            }
        
        }];