Agm marker is not updated using observables

I am using AGM MAP and I am triying to modify the markers of the map using observables. The observables works fine and, internally, the values of the markers were updated correctly. The problem is about when I update the values the agm-map interface not update visually this values although the values ​​were correctly updated in the component (ts). Is possible that needs and event to update the map? Below is the code Could you help me?

Map.html

<div id="map">
<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker *ngFor="let i of agmMarkers" [latitude]="i.lat" [longitude]="i.lng">
    </agm-marker>
</agm-map>

map.ts

export class MapComponent implements OnInit {

  public agmMarkers: agmmarker[] = [
    { lat: 12.954517, lng: 77.3507335 },
    { lat: 52.228973, lng: 20.728218 },
    { lat: 38.5157234723591, lng: -3.2916969355 }
  ];

  constructor(private map_service: MapService) {}

  ngOnInit(): void {
    this.map_service.observable_Mapa.subscribe(
      marker => {
        this.updateMarkers(marker);
      }
    );
  }

  public updateMarkers(markers: Hero) {
    this.agmMarkers = [];
    this.agmMarkers.push({
      lat: markers.lat,
      lng: markers.long,
    });
  }
}

Source: Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.