Currently, I am utilizing Angular Maps powered by Google @agm-core and agm-overlay to implement custom markers. However, when using the (boundsChange) function on the agm-map component, an error occurs with the message "invalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number".
Interestingly, this error only arises when attempting to use a custom marker for displaying additional information.
In order to fetch relevant data from my database based on the bounds of the map, I execute a query which returns an array of 'almacenes'.
Within my function:
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
})
}
The content included in map.component.html goes as follows:
<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>
However, upon execution, there is still an occurrence of the error described earlier stating "invalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number", alongside issues with the functionality of agm-info-window.