[Fixed] agm-map dynamic display/updation of markers not working


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


import { Component, OnInit } from '@angular/core';
import { SocketService } from '../../app/services/socket.service';

  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 = 
  public agmMarkers: agmmarker[] = [
    lat: 12.954517,
    lng: 77.3507335,
    icn: this.mcar

 constructor(private socketService : SocketService) { }

ngOnInit() {
    .subscribe((msg: any) => {
      console.log("msg: "+JSON.stringify(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); 
      lat: entry.latlng.lat,
      lng: entry.latlng.lng,
      icn: this.mcar

interface agmmarker {
  lat?: number;
  lng?: number;
  icn?: string;


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


My bad. The response from the service was in string format.

  lat: +entry.latlng.lat,
  lng: +entry.latlng.lng,
  icn: this.mcar

Typecasting latitude and longitude resolved the issue.

Leave a Reply

(*) Required, Your email will not be published