I am currently working on an Angular 6 application that involves integrating the Google Javascript API with AGM. So far, the map functions well except for dynamically adding markers using an http get request.
Here is a snippet of the component.html:
<agm-map [latitude]="51.017467" [longitude]="10.233982">
<agm-marker *ngFor="let position of positions" [latitude]="position.latitude"
[longitude]="position.longitude"></agm-marker>
</agm-map>
And in the component.ts:
export class EventsListComponent {
public positions = [new Position(51.017467, 10.233982)]; // static point for debug
constructor(public http: HttpClient) {
let eventIds: string[] = ['5bffbac5596a7de59190dfbb']; // also for debug
for (let eventId of eventIds) {
this.http.get<Address>("api/v1/Events/Get/" + eventId +"/GetVenue/GetAddress").subscribe(result => {
console.log(result);
this.addresses.push(result);
});
}
}
export class Address {
constructor(
public latitude: number,
public longitude: number,
public addressLine: string,
public city: string,
public state: string,
public country: string,
public zip) {
}
}
The following data is displayed in the console:
{
"addressLine":"Gartenstraße 7",
"city":"Eschwege",
"country":"Germany",
"zip":"37269",
"state":"Hessen",
"latitude":"51.1821073",
"longitude":"10.0572713"
}
This results in:
https://i.sstatic.net/cbKgs.png
Although the marker appears in the DOM, it does not show up on the map (the visible marker is the static one).
Alternative Approach Attempted:
I have successfully added markers dynamically by using button presses as follows:
<button (click)="btnClick()" class="btn btn-primary"></button>
Then, in the component.ts:
btnClick() {
this.addresses.push(new Address(51.1821073, 10.0572713,"","","","",""));
}
This results in:
https://i.sstatic.net/Hmj09.png
The marker now appears both in the DOM and on the map.
Another Alternative Attempt:
I tried placing the http get request inside the method triggered by the button press like this:
btnClick() {
this.http.get<Address>("api/v1/Events/Get/" + eventId +"/GetVenue/GetAddress").subscribe(result => {
console.log(result);
this.addresses.push(result);
});
}
However, it only adds the marker to the DOM but not the map.
Any suggestions or ideas?