I am new to angular and consider this to be the main issue.
I create my map as
<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 the markers manually, everything works, but when I use *ngForiterate over my list, HTML is created for the markers, but apparently, after the script for the map looked for markers, therefore there are no markers (the map itself).
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();
}
}
locations are loaded from a service that retrieves them from the remote database. I really believe that the problem is that the map is displayed before the ngFor loop is executed, I am not sure how I can make sure that the loop is executed first OR how to tell the map (to repeat) marker display only after the loop is done.
As already mentioned, this is probably pretty solid, but I'm losing now, thanks.