How to show Native Google Maps inside a Modal?

Ionic Framework ionic-v3
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?

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_');
    }

}
4 Likes
3

Thank you, it’s a good solution.:heart_eyes:

1 Like
4

Great Solution. Worked for me :slight_smile:

5

In which file did you add the CSS changes?
A) Main app.scss file?
B) Calling Page scss file?
C) Modal Page scss file?

6

@adityamisra108, In the Modal Page scss file

7

A cleaner solution for the “ionViewWillLeave” code:

ionViewWillLeave() {
  document.querySelectorAll('._gmaps_cdv_').forEach((node) => {
    node.classList.remove('_gmaps_cdv_');
  });
}
8

Thanks man, great solution
I just added the following code , Thanks to @purpletentacle

ionViewWillLeave() {
  document.querySelectorAll('._gmaps_cdv_').forEach((node) => {
    node.classList.remove('_gmaps_cdv_');
  });
}