InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

[simonh1000]

I'm stuck creating a simple marker. In my component I have

this.resto = {lat: 4.7, lng: 52.5};

and in my html

  <ngui-map center="Amsterdam, Netherlands">
    <marker [position]="[resto.lat, resto.lng]" draggable="true"></marker>
  </ngui-map>

but I end up with the error in the title, despipte passing floats. What have I got wrong?

[allenhwkim]

@simonh1000 long time no see at issues :)

Let me see.

[allenhwkim]

https://plnkr.co/edit/lsz0tQSJbbc9dIReTSlI?p=preview It works fine for me. Please check your data again.

[simonh1000]

Hi, nice to speak again @allenhwkim. Could you take a look at https://plnkr.co/edit/HMH14FdElFQcZZVlLr5l?p=preview and press the (new) move button as that's the error I am getting

[simonh1000]

Ok, so mirroring your pattern works

let templateStr: string = `
  <h1>Simple Marker</h1>
   <ngui-map 
    (mapClick)="onClick($event)"
    center="Amsterdam, Netherlands">
    <marker *ngFor="let pos of poss"
      [position]="[pos.lat, pos.lng]" 
      draggable="true"></marker>
  </ngui-map>
  <button (click)="move()">Move</button>
`;

@Component({ template: templateStr })
export class SimpleMarkerComponent {
  poss: { lat: number, lng: number }[];

  constructor() {
    this.poss = [{ lat: 52.3702157, lng: 4.895167899 }];
  }

  move() {
    this.poss = [{ lat: 52.373, lng: 4.896 }];
  }
}

but is hardly intuitive. I guess there is supposed to be a different way to move an existing marker, and the method above works because it creates a new one.

[simonh1000]

Ok, I now recall that the key point in your library was that it provided access to the underlying google maps calls, so that e.g.

  ngOnChanges() {
    if (typeof google == 'object') {
      let pos = new google.maps.LatLng(this.resto.lat, this.resto.lng);
      this.marker.setPosition(pos);
    }
  }

  onMarkerInit(marker) {
    this.marker = marker;
  }

is possible

[allenhwkim]

It seems there is an error with updating as an array. You can still always go with Google Api's code https://plnkr.co/edit/BlUI4tbRrxm8rLF3eTn5?p=preview

[simonh1000]

Ok, I'm fine. Do you want me to leave this issue open as a bug report on updating as an array?

[shyamal890]

+1 facing the same issue