How to dynamically add marker to google maps component on HTTPGET (Angular 6)

Question

I am building an Angular 6 application with a Google Javascript API integration using AGM. The map works except for adding markers dynamically using http get.

This is 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 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) {
  }
}

This is printed to the console:

{
"addressLine":"Gartenstraße 7",
"city":"Eschwege",
"country":"Germany",
"zip":"37269",
"state":"Hessen",
"latitude":"51.1821073",
"longitude":"10.0572713"
}

Produces the following result:

The marker shows up in the DOM but not on the map (The marker you see is the static one, there should be two).

Something else I tried:

Adding markers dynamically works with button presses like this:

<button (click)="btnClick()" class="btn btn-primary"></button>

And then in the component.ts:

btnClick() {
    this.addresses.push(new Address(51.1821073, 10.0572713,"","","","",""));
}

Produces the following result:

The marker shows up in the DOM and on the map.

Something else I tried (pt2):

Putting the http get request in the method called 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);
  });
}

It still only adds the marker to the dom and not the map.

Any ideas?

rhavelka · Accepted Answer · 2018-11-29 20:38:11Z

2

I think you are passing the lat/lng as a string (as denoted by the "" in your console log) when you are using the service call but you are passing it in as a number when you manually add it. Try doing something like this

this.addresses.push({
  addressLine: result.addressLine,
  city: result.city,
  country: result.country,
  zip: result.zip,
  state: result.state,
  latitude: +result.latitude,
  longitude: +result.longitude
});

or you could try shortening it up to something like this

result.latitude = +result.latitude;
result.longitude = +result.longitude;
this.addresses.push(result);

answered Nov 29, 2018 at 20:38

rhavelka

2,4144 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Over a year ago

Hahaha I had been working on this for like 5 hours and just solved it not 2 mins before you posted this. I realised the problem when I printed out the static point next to the one from the get request and saw the different data types. It all works now :)

Alex Over a year ago

The interesting part, coming from a c#/java (strongly typed) background, is that in the Address class, both latitude and longitude are both of type number. Which means they should also be a number when referenced in the html file...

rhavelka Over a year ago

glad to hear you figured it out

Collectives™ on Stack Overflow

How to dynamically add marker to google maps component on HTTPGET (Angular 6)

Something else I tried:

Something else I tried (pt2):

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

Something else I tried:

Something else I tried (pt2):

1 Answer 1

3 Comments

Related