agm markers not rendering from ngfor

Question

I am fairly new to angular and have what I think is a basic problem.

I create my map like

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="location.lat" [longitude]="location.lng" *ngFor="let location of locations; let i=index">
        <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
            <ng-template>
                <strong>{{location.title}}</strong>
                <p>adresse</p>
            </ng-template>
        </agm-snazzy-info-window>
    </agm-marker>
</agm-map>

when I set markers manually, everything works, but when I use *ngFor to loop through my list, the html for the markers is created, but apparently after the script for the map looked for markers, so no markers are rendered (the map itself is).

From my controller:

export class LocationMapComponent implements OnInit {

 lat: number = 51.678418;
 lng: number = 7.809007;
 locations: Location[];

 async ngOnInit() {

}

public async getLocations()  {
    this.locations = await this._locationService.getLocations();

}

constructor(private _locationService:LocationService, private _coreCOMService: CoreCOMService, private _coreLanguageService: CoreLanguageService, private _coreLogService: CoreLogService, private _componentFactoryResolver: ComponentFactoryResolver, private _coreSystemService: CoreSystemService) {

    this.getLocations();
}

}

the locations get loaded from a service which fetches them from a remote database. I do believe the problem is that the map is rendered before the ngFor loop is executed, I am not sure how I can make sure the loop is executed first OR how to tell the map to (re-)render the marker only after the loop is done.

As said, this is probably pretty basic, but I am at a loss right now, thanks.

Answer 1

The Latitude/Longitudes must be of type Number. If they are being returned from an API or some kind of service as a string they need to be converted. From my experience it seems to require it to be strictly typed as a Number.