Estoy tratando de ejecutar la función showInfoWindow solo cuando el mapa está abierto en pantalla completa, pero hasta ahora no puedo rastrear este evento.
¿Cómo puedo rastrear el evento de pantalla completa para activar la función solo cuando el mapa está abierto en pantalla completa? ¿Cómo muevo el bloque map-place-selected-wrapper dentro de agm-info-window en este caso?
places: Places[] = []; mapPlaceSelected: any = null; mapPlaceSelectedShow = false; loadMoreIndex = 12; mapCenter: any = [0, 0]; infoWindowOpened: any = null; showInfoWindow(infoWindow: any, i: number) { if (this.infoWindowOpened === infoWindow) { return; } if (this.infoWindowOpened !== null) { this.infoWindowOpened.close(); } this.infoWindowOpened = infoWindow; console.log(infoWindow); } mapPlaceClick(place: Places, i: number) { this.mapPlaceSelected = null; this.mapPlaceSelectedShow = true; setTimeout(() => { this.mapPlaceSelected = place; }, 1); } <div class="places-map-wrapper" (clickOutside)="mapPlaceHide()"> <agm-map [latitude]="mapCenter[0]" [longitude]="mapCenter[1]" *ngIf="places.length" [zoom]="8" [disableDefaultUI]="false" [styles]="styles"> <ng-container *ngFor="let place of places; let i = index"> <agm-marker *ngIf="place.lat && place.long" (markerClick)="mapPlaceClick(place, i); showInfoWindow(infoWindow, i);" [latitude]="place.lat" [longitude]="place.long" [iconUrl]="'assets/img/map.svg'"> <agm-info-window #infoWindow> </agm-info-window> </agm-marker> </ng-container> </agm-map> <div class="map-place-selected-wrapper" [class.active]="mapPlaceSelectedShow"> <span class="b_delete_image" (click)="mapPlaceHide()"></span> <ng-container *ngIf="mapPlaceSelected"> <ng-container [ngTemplateOutlet]="placeItem" [ngTemplateOutletContext]="{place:mapPlaceSelected, index:1}"> </ng-container> </ng-container> </div> </div>¡Resuelto! Necesitaba agregar (cambio de pantalla completa) = "cambio de pantalla completa ()"
fullscreen: boolean = false; fullscreenchange() { if (document.fullscreenElement) { this.fullscreen = true; console.log('fullscreen = true!'); } else { this.fullscreen = false; console.log('fullscreen = false!'); } } <agm-map [latitude]="mapCenter[0]" [longitude]="mapCenter[1]" *ngIf="places.length" [zoom]="8" [disableDefaultUI]="false" (fullscreenchange)="fullscreenchange()" [styles]="styles"> </agm-map> fullscreen: boolean = false; fullscreenchange() { if (document.fullscreenElement) { this.fullscreen = true; console.log('fullscreen = true!'); } else { this.fullscreen = false; console.log('fullscreen = false!'); } } <div class="places-map-wrapper" (clickOutside)="mapPlaceHide()"> <agm-map [latitude]="mapCenter[0]" [longitude]="mapCenter[1]" *ngIf="places.length" [zoom]="8" [disableDefaultUI]="false" (fullscreenchange)="fullscreenchange()" [styles]="styles"> <ng-container *ngFor="let place of places; let i = index"> <agm-marker *ngIf="place.lat && place.long" (markerClick)="mapPlaceClick(place, i);" [latitude]="place.lat" [longitude]="place.long" [iconUrl]="'assets/img/map.svg'"> <agm-info-window #infoWindow *ngIf="fullscreen"> <div class="map-place-selected-wrapper" [class.active]="mapPlaceSelectedShow"> <ng-container *ngIf="mapPlaceSelected"> <ng-container [ngTemplateOutlet]="placeItem" [ngTemplateOutletContext]="{place:mapPlaceSelected, index:1}"> </ng-container> </ng-container> </div> </agm-info-window> </agm-marker> </ng-container> </agm-map> <div *ngIf="!fullscreen" class="map-place-selected-wrapper" [class.active]="mapPlaceSelectedShow"> <span class="b_delete_image" (click)="mapPlaceHide()"></span> <ng-container *ngIf="mapPlaceSelected"> <ng-container [ngTemplateOutlet]="placeItem" [ngTemplateOutletContext]="{place:mapPlaceSelected, index:1}"> </ng-container> </ng-container> </div> </div>