Does not load sebm-google-map-marker with *ngFor | async

I have service for async data to load from json file. *ngFor does create sebm-google-map-marker for all data returened but sebm-google-map does not load newly added marker. marker.json { "data" : [ { "lat": 51.673858, "lng": 7.815982, "label": "A", "draggable": true }, { "lat": 51.373858, "lng": 7.215982, "label": "B", "draggable": false }, { "lat": 51.723858, "lng": 7.895982, "label": "C", "draggable": true } ] }

service.ts

getmockStores() { return this._http.get(CONFIG.baseUrls.mockstoreSelector) .map((response: Response) => <marker[]>response.json().data) .catch(this._exceptionService.catchBadResponse) }

component.ts ` getMockMarkers(){

this.mockStores = this._storeService.getmockStores()
  .catch(e => {
    this._toastService.activate(`${e}`);
    return Observable.of();
  })

}) }`

.component.html <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false"> <sebm-google-map-marker *ngFor="#m of mockStores" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable" (dragEnd)="markerDragEnd(m, $event)"> </sebm-google-map-marker> </sebm-google-map>

[austinlarue]

I just ran into this and thought I would share my work around in case anyone else runs into it.

In my ts file I added a simple method to convert a string to a number:

private convertStringToNumber(value: string): number {
        return +value;
    }

Then in the html I just pass in the lat/long to this method:

<sebm-google-map-marker *ngFor="let location of clientLocations" [latitude]="convertStringToNumber(location.latitude)" [longitude]="convertStringToNumber(location.longitude)"></sebm-google-map-marker>

[nileshmahant]

Finally figure it out. In my scenario i was getting a data from Http Service which was coming in JSON. I was binding that data’s lat and lng fields in for loop. It was not working. Markers were getting created in DOM but not displaying in canvas.

This is how i figured it out:

1. Created an Interface named marker: interface marker { lat: number; lng: number; label?: string; draggable: boolean; }
2. When my data comes into observable then at subscribe method, I call other method pushMarker() when data is completely fetched:

this.observable = this.gisDataService.getEntities(dcode); this.observable.subscribe( data => this.data = data.map((entity:Entity) => new Entity(entity.uid,entity.alpha,entity.lat,entity.lng,entity.type,entity.tag,entity.addr,entity.desc,entity.zcode,entity.rcode,entity.dcode)), error => alert(error), () => this.pushMarkers() //this is where i call function on finish );

1. Then I looped in my data and pushed it into markers array:

this.data.forEach(element => { this.markers.push({ lat:Number(element.lat), lng:Number(element.lng), label:element.tag, draggable:false }) console.log(“pushed”+element.lat+“,”+element.lng);
});

Note: I figured it out that when data is received in JSON it is not getting converted to number even if you map JSON to a class(as I did). But at the time of Pushing (in pushMarker() function you have to explicitly convert lat/lng to Number().

Hope it helps.