In my Angular 5 application, I am utilizing Angular Google Maps (https://angular-maps.com/) along with socket.io for real-time data updates of latitude and longitude from the server. Although I am successfully pushing the updated data to an array in the component, the agm-map on the UI is not reflecting these changes.
Below is the code snippet from my component.ts file:
import { Component, OnInit } from '@angular/core';
import { SocketService } from '../../app/services/socket.service';
@Component({
selector: 'app-maps',
templateUrl: './maps.component.html',
styleUrls: ['./maps.component.scss']
})
export class MapsComponent implements OnInit {
public title: string = 'AGM project';
public lat: number = 12.954517;
public lng: number = 77.3507335;
public msg : string;
public mcar = "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png";
public agmMarkers: agmmarker[] = [
{
lat: 12.954517,
lng: 77.3507335,
icn: this.mcar
}
];
constructor(private socketService : SocketService) { }
ngOnInit() {
this.socketService.getMessage().subscribe((msg: any) => {
console.log("msg: "+JSON.stringify(msg));
this.updateMarkers(msg);
});
}
public updateMarkers(msg){
this.agmMarkers = [];
for (let entry of msg.stats) {
console.log("entry.latlng.lat: "+entry.latlng.lat);
console.log("entry.latlng.lng: "+entry.latlng.lng);
this.agmMarkers.push({
lat: entry.latlng.lat,
lng: entry.latlng.lng,
icn: this.mcar
});
}
}
}
interface agmmarker {
lat?: number;
lng?: number;
icn?: string;
}
Here is the snippet from my component.html file:
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker *ngFor="let i of agmMarkers"
[latitude]="i.lat" [longitude]="i.lng" [iconUrl]="i.icn">
</agm-marker>
</agm-map>