I am asking a question that many people ask, but no one gave a clear answer, almost on AGM (Angular 2 package for Google map)
Here is my code, but my first opened marker does not want to close, and the other markers close half the time
clickedMarker(marker: Marker, infoWindow, index: number) {
if (this.infoWindow && this.infoWindow !== infoWindow) {
this.infoWindow.close();
}
this.infoWindow = infoWindow;
}
Can someone help me to fix this close problem, using the close function or the event emitter https://angular-maps.com/api-docs/agm-core/components/AgmInfoWindow.html#source
Thanks for your time and help ;)
EDIT : FOUND THE ANSWER
I had my <agm-info-window #infoWindow>
displaying multiple information using <a *ngIf="myCondition"..>{{address}}</a>
but it looks like it was not rendering the popup when the condition was evaluate to true again.
I replaced it by <a [class.hidden]="!myCondition">..</a>
and it fixed the multiple display of markers.
Another good practice is to close when there is a click on map, and to close it if opened :
clickedMap($event) {
if (this.infoWindow) {
this.infoWindow.close();
}
}
It might help in the future... who knows ?
An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map. Info windows appear as a Dialog to screen readers.
<agm-map (mapClick)="mapClick($event)">
<agm-marker (markerClick)=markerClick(iw)>
<agm-info-window #iw>
currentIW: AgmInfoWindow;
previousIW: AgmInfoWindow;
constructor(){
this.currentIW = null;
this.previousIW = null;
}
// other functions
mapClick() {
if (this.previousIW) {
this.previousIW.close();
}
}
markerClick(infoWindow) {
if (this.previousIW) {
this.currentIW = infoWindow;
this.previousIW.close();
}
this.previousIW = infoWindow;
}
After a long research and unclear solutions a finally got a fine solution for clear previous agm-info-window when a new one is opened
This is my component.html:
<agm-map (mapClick)="close_window($event)" [fullscreenControl]='true' [mapTypeControl]='true' [latitude]="lat" [longitude]="lng" [zoom]="13" [scrollwheel]="false">
<div *ngFor="let data of zonas">
<agm-marker (markerClick)=select_marker(infoWindow) [latitude]="data.latitud" [longitude]="data.longitud">
<agm-info-window #infoWindow >
</agm-info-window>
</agm-marker>
</div>
</agm-map>
And this is my component.ts:
constructor(public apiService: ApiService) {}
infoWindowOpened = null
previous_info_window = null
...
close_window(){
if (this.previous_info_window != null ) {
this.previous_info_window.close()
}
}
select_marker(data,infoWindow){
if (this.previous_info_window == null)
this.previous_info_window = infoWindow;
else{
this.infoWindowOpened = infoWindow
this.previous_info_window.close()
}
this.previous_info_window = infoWindow
}
So every time a new window will be open it detect the event and closes the previous one, also this is working for closing a opened window if the user clicks outside the window in any other part of the map
Simplest way is to use isOpen
property in agm-info-window
. This is a boolean
. Let me know if you guys need a complete example
<agm-info-window [isOpen]="markerSelectIndex === index">
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