I am using Angular google map: https://angular-maps.com/. Right now as default functionality, it open the info-window defined inside marker. And on click of any new marker it remains open old window. I need to close info window on click of another marker. This is html code:
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
<agm-marker
*ngFor="let m of markers; let i = index"
(markerClick)="clickedMarker(m.label, infoWindow, i)"
[latitude]="m.lat"
[longitude]="m.lng"
[markerDraggable]="m.draggable"
[iconUrl]="m.icon">
<agm-info-window #infoWindow>
<strong>{{m.name}}</strong><br>
</agm-info-window>
</agm-marker>
</agm-map>
this is code when marker is clicked:
clickedMarker(label: string, infoWindow, marker, index: number) {
if( this.infoWindowOpened === infoWindow)
return;
if(this.infoWindowOpened !== null)
{
this.infoWindowOpened.close();
}
this.infoWindowOpened = infoWindow;
}
It works when the page refresh. But as soon as I refresh markers variable it show this error:
ERROR TypeError: Cannot read property 'then' of undefined
at InfoWindowManager.close (info-window-manager.js:48)
at AgmInfoWindow.close (info-window.js:94)
at SearchComponent.clickedMarker (search.component.ts:188)
component code to refresh markers:
this.markers.push({
name: item.Name,
lat: parseFloat(item.latitude.toString()),
lng: parseFloat(item.longitude.toString()),
draggable: false,
icon:'assets/img/marker.png'
});
You can rewrite your clickedMarker
very simple as follows
previous;
...
clickedMarker(infowindow) {
if (this.previous) {
this.previous.close();
}
this.previous = infowindow;
}
Make the change to your event binding function in the template
(markerClick)="clickedMarker(infoWindow)"
The live code is here
I have same problem infoWindow is not closing automatically. in my scenario i have two buttons to show favourite and unfavourite icons on map. i'm calling this.infoWindowOpened = null in ngOnInint() on every favourite and unfavourite button click.so it is initialising every click as null. so it is solved my problem.. it may be helpful for others..
ngOnInit() {
this._mapService.selectedIcon.subscribe((res) => {
this.infoWindowOpened = null;
});
}
if (this.infoWindowOpened === infoWindow)
return;
if (this.infoWindowOpened !== null && this.infoWindowOpened !== undefined)
this.infoWindowOpened.close();
this.infoWindowOpened = infoWindow;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With