Open popup when click on marker

Hello guys, I have this code :

popupIsOpen = false;
const marker: Marker = this.map.addMarkerSync(markerData);
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(this.markerClick);

markerClick(params: any) {
        this.popupIsOpen = !this.popupIsOpen;
        const marker: Marker = params[1] as Marker;
}

The template :

<ion-content>
    <div id="map_canvas"></div>
</ion-content>
<div [ngClass]="{'overlay': popupIsOpen, 'hidden': !popupIsOpen}">
    <ion-card>
        <ion-card-content>
            <ion-button (click)="popupIsOpen=!popupIsOpen">close</ion-button>
             Content
        </ion-card-content>
    </ion-card>
</div>

The popup is not displayed when I click on marker. What I’m doing wrong ? Thx in advance.

First, try to log something to the console when you click the marker to check if the Function gets called. Second inspect your App using Google Chrome Dev Tools or Safari Webinspector, search for your “popup”, check if the class “overlay” is set. If yes, look up why it isn’t shown. If no, reply here again please.

I have run into all sorts of trouble when I violate the following rule, so see if you can rearrange your template to be in compliance and if that has any effect on your situation:

The only top-level elements in a page template should be <ion-header>, <ion-content> and <ion-footer>.