InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number agm-core agm-overlay

Question

I'm using Angular Maps from google @agm-core and agm-overlay for custom markers when i use the function (boundsChange) on the agm-map i get the error invalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

with the normal agm-marker i don't have any error, but i need to use a custom marker to show information on it

i do a query to my database with the bounds and get and array of 'almacenes'

myfunction

doSomething2(e) {
fetch(`${this.conexion}/api/instalaciones/bounds/${e.ka.h}/${e.ka.g}/${e.oa.h}/${e.oa.g}`)
  .then(response => {
    return response.json()
  }).then(respuesta => {
    console.log(respuesta)
    this.almacenes=respuesta.content
  })
}

map.component.html

<agm-map [zoom]="12" [latitude]="lat" [longitude]="lng" (boundsChange)="doSomething2($event)">
    <agm-overlay *ngFor="let almacen of almacenes;let i=index" [latitude]="almacen.latitudInstalacion"
        [longitude]="almacen.longitudInstalacion">
        <div class="block">
            <strong style="color:white;">{{almacen.idInstalacion}}</strong>
        </div>
        <agm-info-window>Info Window {{i}}</agm-info-window>
    </agm-overlay>
</agm-map>

I get the error invalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number and the agm-info-window doesn't work

Answer 1

agm-info-window is not a child of agm-map, but an independent directive.

<agm-map [zoom]="12" [latitude]="lat" [longitude]="lng" (boundsChange)="doSomething2($event)">
    <agm-overlay *ngFor="let almacen of almacenes;let i=index" [latitude]="almacen.latitudInstalacion"
        [longitude]="almacen.longitudInstalacion">
        <div class="block">
            <strong style="color:white;">{{almacen.idInstalacion}}</strong>
        </div>
    </agm-overlay>
    <agm-info-window *ngFor="let almacen of almacenes;let i=index">Info Window {{i}}</agm-info-window>
</agm-map>

---

Since info window and overlay share the same base array, it's not efficient to do two separate ngFors, so we can join them with a joint ng-container parent:

<agm-map [zoom]="12" [latitude]="lat" [longitude]="lng" (boundsChange)="doSomething2($event)">
  <ng-container *ngFor="let almacen of almacenes;let i=index" >
    <agm-overlay [latitude]="almacen.latitudInstalacion"
        [longitude]="almacen.longitudInstalacion">
        <div class="block">
            <strong style="color:white;">{{almacen.idInstalacion}}</strong>
        </div>
    </agm-overlay>
    <agm-info-window>Info Window {{i}}</agm-info-window>
  </ng-container>
</agm-map>