Angular-google-maps: ¿Cerrar las ventanas de información de marcadores cuando se hace clic en una nueva?

Sí, me he encontrado con el mismo problema antes.

Aquí está el sonido de trabajo
http://plnkr.co/edit/cwuwBN?p=preview

No pude usar este enfoque.
Mi solución fue descargar las fuentes e incluir el siguiente código en el archivo (google-map-info-window.ts):

// establece esta propiedad en el archivo superior, debajo let infoWindowId = 0; (línea 7)
let infoWindowLastContext: SebmGoogleMapInfoWindow = null;

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

infoWindowLastContext = this;

return this._infoWindowManager.open(this);

}

Espero que esto ayude...

Mi única solución de plantilla:

<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>

Con el nuevo 1.0.0-beta.0 - green-zebra AOT no funciona:
La propiedad 'lastOpen' no existe en el tipo 'AgmMap'

¿Qué puede pasar?

Funciona muy bien, el uso de mi plantilla invoca una función de clic personalizada como en

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

Hola,

Incluso con la solución @ Martin-B, no funciona: /

Alguna ayuda ?

@ Martin-B muchas gracias por la solución. ¡Funciona de maravilla!

@ Martin-B ¡Gracias!
@melbouhy Qué vergüenza; olvidé agregar #infoWindow en <agm-info-window> . ¿Quizás cometiste el mismo error?

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

this.IW = data;

}

@ Martin-B cómo usar esto ((markerClick) = "gm.lastOpen? .Close (); gm.lastOpen = infoWindow; markerClicked (m);") en agm-marker por favor responda con el código .ts

@menakav Aquí hay un código trabajado:
en el archivo .ts:
'
markerClicked (infoWindow) {
si (this.infoWindowOpened === infoWindow)
regreso;

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

    this.infoWindowOpened = infoWindow;
}

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

@menakav Tu código no me funciona
:(

Probé todos los códigos en este foro y mi problema es el infoWindow recibido aquí:

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

infoWindow siempre es el primero, sin importar cuántos puntos tenga. Siempre recibí el infoWindow con _id = 0.

El parámetro index recibe el ID verdadero del marcador en el que se hizo clic ...

Este es mi 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>

¿Alguna idea de por qué siempre viene la misma ventana de información?

La solución "solo plantilla" de

@markschmid mi solución cuando se reemplaza la matriz inicial de marcadores agm.
(markerClick)="tmp=gm.lastOpen;gm.lastOpen=infoWindow;tmp?.close();"

Mi solución, basada en la respuesta de @lauwrentius :

* .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

¿Puede explicar cómo está ejecutando filter(){infoWindowOpened = null;} sin que arroje un error "no se puede encontrar infoWindowOpened"? Esto ocurre después de cambiar la matriz de iconos de marcador.

Resolví el problema.
Compartí el código:
(markerClick) = "clickedMarker (infoWindow, point, point.latitude, point.longitude)">

clickedMarker (data = undefined, currentPoint: any, lat: string, lng: string) {
if (this.IW) {
this.IW.close ();
}
detalles de const = data._infoWindowManager._infoWindows;
if (detalles.tamaño> 0) {
details.forEach ((elemento, clave) => {
if (key.hostMarker.latitude === lat && key.hostMarker.longitude === lng) {
this.IW = clave;
}
});
}
}

Espero que te ayude.

Gracias.

El sábado 28 de abril de 2018 a las 02:04, Cristian Hernandez [email protected]
escribió:

Resolví el problema.
Compartí el código:
[latitude] = "point.latitude" [longitude] = "point.longitude"
[iconUrl] = "iconUrl" (markerClick) = "clickedMarker (infoWindow, punto,
point.latitude, point.longitude) "> [disableAutoPan] = "true" * ngIf = "! isDetailMovil">

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

Espero que te ayude.

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/SebastianM/angular-google-maps/issues/797#issuecomment-385086695 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AgIM0TGCgyHK-snaJdIlSZSQuq0MF1Ihks5ts4DDgaJpZM4LQ0M7
.

Esta es mi solución. Funciona con 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>

Mecanografiado:

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;
    }

Después de una larga investigación y soluciones poco claras, finalmente obtuve una buena solución para borrar la ventana de información de agm anterior cuando se abre una nueva.

Este es mi 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>

Y este es mi componente.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
}

Entonces cada vez que se abre una nueva ventana detecta el evento y cierra la anterior, también esto funciona para cerrar una ventana abierta si el usuario hace clic fuera de la ventana en cualquier otra parte del mapa

Gracias @JimmyTheNerd , ¡funcionó para mí!

Mi solución, basada en la respuesta de @lauwrentius :

* .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;   
}

Gracias @JimmyTheNerd , está funcionando.

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.