I'm trying to run the showInfoWindow function only when the map is open at full screen, but so far I can't trace this event.
How can I track the fullsreen event to trigger the function only when the map is open to full screen? How do I move the map-place-selected-wrapper block inside the agm-info-window in this case?
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>Resolved! I needed to add (fullscreenchange)="fullscreenchange()"
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>