I am using Angular Google Maps (https://angular-maps.com/) in an Angular 5 application, also using socket.io for polling of the latitude and longitudes from server. I'm able to push the data to an array in the component, but the agm-map isn't getting updated
component.ts
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;
}
component.html
<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>
My bad. The response from the service was in string format.
this.agmMarkers.push({
lat: +entry.latlng.lat,
lng: +entry.latlng.lng,
icn: this.mcar
});
Typecasting latitude and longitude resolved the issue.