CODEWITHSUNDEEP
angulargoogle-mapstypescriptionic2ionic3
Dijish U.K
Dijish U.K

Reputation: 159

Ionic 3 - Unable to click on alert dialog shown above google maps

I am implementing a alert dialog using AlertController in ionic 3 as follow

let alert = this.alertCtrl.create({
 title: 'Low battery',
 subTitle: '10% of battery remaining',
 buttons: ['Dismiss']
});
alert.present();

This alert dialog is visible above google maps, but I am unable click on this alert button, any click on alert dialog is still treated as I am clicking on google maps below it. Even with alert dialog shown above the map I am still able to interact with the map as usual, I can click any marker in map, I can zoom in, zoom out. Alert dialog showing above map view

Upvotes: 4

Views: 595

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

You need to set the map as not clickable when showing the alert, and then set it back as clickable when closing it:

public showAlert(): void {

    // Disable the map
    this.map.setClickable(false);

    let alert = this.alertCtrl.create({
        title: 'Low battery',
        subTitle: '10% of battery remaining',
        buttons: [
            {
                text: 'Dismiss',
                role: 'cancel',
                handler: () => {

                    // Enable the map again
                    this.map.setClickable(true); 

                }
            }
        ]
    });

    // Show the alert
    alert.present();

}

Upvotes: 5

Related Questions