How to show Native Google Maps inside a Modal?


#1

I am trying to show the ionic native google maps in my Ionic 3 application. I have a tab project. So, i want to open the google map in a modal and get some data back to the calling page. But, the transparent windows is showing. I saw another issue here and followed the solution give there like below in app.scss:

ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

But, it did not fix my problem. Still can’t see the google map in the modal.

Then tried to follow another solution but still can’t manage to appear the google map in the modal.

In home.ts:

 openMap() {
    this.isModal = true;
    let mapModal = this.modalCtrl.create('MapFilterPage');
    mapModal.onDidDismiss((data) => {
      this.isModal = false;
    });
    mapModal.present();
  }

In home.html:

<ion-content [style.opacity]="isModal ? 0 : 1" padding>
      <button ion-button item-right >
        <ion-icon name="add" (click)="openMap()"></ion-icon>
      </button>
</ion-content>

But, when tried to use below code, the google maps is showing fine.

this.navCtrl.setRoot('MapFilterPage');

How to show google maps in modal properly?


Native Google Maps not working inside a Modal
#2

Add the following CSS rule:

ion-app._gmaps_cdv_ .ion-page:not(._gmaps_cdv_),
ion-app._gmaps_cdv_ ion-modal:not(._gmaps_cdv_) {
    display: none;
}

In map-filter.ts (or the page that is showing the modal map)

ionViewWillLeave() {

    const nodeList = document.querySelectorAll('._gmaps_cdv_');

    for (let k = 0; k < nodeList.length; ++k) {
        nodeList.item(k).classList.remove('_gmaps_cdv_');
    }

}