Angular-google-maps: Close marker info windows when a new one clicked?

Yup, I've encountered the same issue before.

Here's the working plunk
http://plnkr.co/edit/cwuwBN?p=preview

i could not use this approach.
My solution was downloaded the sources and include the following code in the file (google-map-info-window.ts):

// set this property in the top file, below let infoWindowId = 0; (line 7)
let infoWindowLastContext: SebmGoogleMapInfoWindow = null;

open(): Promise {
if(infoWindowLastContext !== null) {
this._infoWindowManager.close(infoWindowLastContext)
}

infoWindowLastContext = this;

return this._infoWindowManager.open(this);

}

I hope this helps...

My template only solution:

<sebm-google-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <sebm-google-map-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </sebm-google-map-info-window>
</sebm-google-map-marker>

@soyersoyer @lazarljubenovic

<agm-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <agm-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </agm-info-window>
</agm-marker>

With the new 1.0.0-beta.0 - green-zebra AOT is not working:
Property 'lastOpen' does not exist on type 'AgmMap'

What can be happen?

Works great, my template usage invokes a custom click function as in

(markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow; markerClicked(m);"

Hello,

Even with @Martin-B solution, it doesn't work :/

Any help ?

@Martin-B thanks heaps for the solution. Works a treat!

@Martin-B Nice thx !
@melbouhy Shame on me; forgot to add #infoWindow in <agm-info-window>. Maybe you did the same mistake ?

public openIW(data = undefined){
if(this.IW){
this.IW.close();
}

this.IW = data;

}

@Martin-B how to use this ((markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow; markerClicked(m);") in agm-marker please reply with .ts code

@menakav Here is a worked code:
in .ts file:
`
markerClicked(infoWindow) {
if( this.infoWindowOpened === infoWindow)
return;

    if(this.infoWindowOpened !== null)
    {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;
}

in .html file: (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow; markerClicked(m);"`

@menakav Your code don't works for me
:(

I tested all the codes in this forum, and my problem is the infoWindow received here:

  clickedMarker(infoWindow, index: number) {
    ...
  }

infoWindow always is the first one, no matter how any points I have. Always I received the infoWindow with _id = 0.

The parameter index receives the true ID of the clicked marker....

This is my html:

<agm-marker *ngFor="let point of points; let i = index" [latitude]="point.latitude"
                            [longitude]="point.longitude"
                            [iconUrl]="iconUrl" (markerClick)="clickedMarker(infoWindow, i)">
<agm-info-window [disableAutoPan]="true" #infoWindow *ngIf="!isDetailMovil">
        <div class="marker__tittle">{{point.name}}</div>

Any ideas why always is coming the same infoWindow?

@soyersoyer 's "template only" solution works great. However, once the initial agm-marker array is replaced with new marker elements (e.g. after ajax update), all of a sudden, the previous infowindows don't close automatically anymore. What could be the problem here?

@markschmid my workaround when the initial agm-marker array is replaced.
(markerClick)="tmp=gm.lastOpen;gm.lastOpen=infoWindow;tmp?.close();"

My solution, based on @lauwrentius answer:

*.html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

*.ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

    if (this.infoWindowOpened !== null) {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;   
}

@JimmyTheNerd

Can you explain how you are running filter(){infoWindowOpened = null;} without it throwing a 'cannot find infoWindowOpened' as an error? This occurs after changing the marker icon array.

I solved the problem.
I shared the code:
(markerClick)="clickedMarker(infoWindow, point, point.latitude, point.longitude)">

clickedMarker(data = undefined, currentPoint: any, lat: string, lng: string) {
if (this.IW) {
this.IW.close();
}
const details = data._infoWindowManager._infoWindows;
if (details.size > 0) {
details.forEach((element, key) => {
if (key.hostMarker.latitude === lat && key.hostMarker.longitude === lng) {
this.IW = key;
}
});
}
}

i Hope it help.

Thank you.

On Sat, 28 Apr 2018 at 02:04, Cristian Hernandez notifications@github.com
wrote:

I solved the problem.
I shared the code:
[latitude]="point.latitude" [longitude]="point.longitude"
[iconUrl]="iconUrl" (markerClick)="clickedMarker(infoWindow, point,
point.latitude, point.longitude)"> [disableAutoPan]="true" *ngIf="!isDetailMovil">

clickedMarker(data = undefined, currentPoint: any, lat: string, lng:
string) { if (this.IW) { this.IW.close(); } const details =
data._infoWindowManager._infoWindows; if (details.size > 0) {
details.forEach((element, key) => { if (key.hostMarker.latitude === lat &&
key.hostMarker.longitude === lng) { this.IW = key; } }); } }

i Hope it help.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/SebastianM/angular-google-maps/issues/797#issuecomment-385086695,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AgIM0TGCgyHK-snaJdIlSZSQuq0MF1Ihks5ts4DDgaJpZM4LQ0M7
.

Here's my solution. Works with angular 6.
HTML:

<agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude"[longitude]="marker.longitude" (markerClick)="markerClick(infoWindow)">
<agm-info-window #infoWindow>
</agm-info-window>
</agm-marker>

TypeScript:

lastSelectedInfoWindow: any;
markerClick(infoWindow: any) {
        if (infoWindow == this.lastSelectedInfoWindow) {
            return;
        }
        if (this.lastSelectedInfoWindow != null) {
         try{
            this.lastSelectedInfoWindow.close();
          } catch {} //in case if you reload your markers
        }
        this.lastSelectedInfoWindow = 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

Thanks @JimmyTheNerd, It worked for me!

My solution, based on @lauwrentius answer:

*.html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

*.ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

    if (this.infoWindowOpened !== null) {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;   
}

Thanks @JimmyTheNerd , Its Working.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.