События маркера вызываются дважды, а ползунок отображается только в первый раз

Question

У меня очень, очень странная проблема с ioni c. Поэтому я попытался щелкнуть маркер, который я нарисовал на карте, используя google-maps, и у меня было 2 проблемы:

1. Когда я нажимаю на маркер в первый раз, слайдер отображается на моем модал, слайдер работает и у меня есть нумерация страниц. Но у меня открыты 2 всплывающих окна, потому что событие вызывается дважды.

2. Когда я нажимаю на маркер в следующий раз, слайдер отображается на моем модале, слайдер не работает, и у меня нет Пагинация Событие вызывается один раз.

Мой компонент:

export class ProductsOnMapComponent implements OnInit, AfterViewInit {
map: GoogleMap;
shops = [];

constructor(
    public router: Router,
    public productService: ProductService,
    public shopService: ShopService,
    public modalController: ModalController
) {
}

ngAfterViewInit() {
    this.loadMap();
}

ngOnInit() {
}

loadMap() {
    this.map = this.shopService.getMap();
    this.shopService.getShopsMap()
        .then((data: ShopInterface[]) => {
            this.shopService.getProductsMarkers(data).forEach((productData: any) => {
                const marker: Marker = this.map.addMarkerSync(markerData);
                marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe((params) => {
                    console.log('Event Subscribe');
                    this.markerClick(params);
                });
            });
        });

}

markerClick(params: any) {
    console.log('Marker Click 1');
    const marker: Marker = params[1] as Marker;
    marker.hideInfoWindow();
    this.shopService.getList().then(async (campaigns: any) => {
        this.shops = shops;
        const modal = await this.modalController.create({
            component: MarkerModalComponent,
            cssClass: 'modal',
            componentProps: {
                shops
            }
        });
        console.log('Marker Click 2');
        return await modal.present();
    });
}

}

MarkerModalComponent

export class MarkerModalComponent implements OnInit {

@Input() shops;

slideOpts = {
    slidesPerView: 1,
    paginationType: 'fraction'
};

ngOnInit() {

}

constructor(
    public navParams: NavParams,
    public modalController: ModalController
    ) {
    this.shops = navParams.get('shops');
}

closeModal() {
    this.modalController.dismiss({
        dismissed: true
    });
}

}

marker-modal.component.html

<ion-header>
<ion-toolbar>
    <ion-buttons slot="end">
        <ion-icon icon="close" (click)="closeModal()">Close</ion-icon>
    </ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
    <ion-slides pager="true" [options]="slideOpts">
        <ion-slide *ngFor="let shop of shops">
            <shop-card
                [shop]="shop"
            ></shop-card>
        </ion-slide>
    </ion-slides>
</ion-content>

Пожалуйста, помогите мне. Спасибо заранее.