Native Google Maps not working inside a Modal


#1

I’m trying to use Native Google Maps (https://ionicframework.com/docs/native/google-maps/) inside of a Modal, and the map isn’t shown, instead in place of the map the background is transparent and I can see the underlying page. Any advice how to fix this will be highly appreciated!


How to show Native Google Maps inside a Modal?
#2

@dimitri320 have you got any solution for this if you please share , i am facing same issue.


#3

I’m pretty sure you have to manually set all the other backgrounds transparent as well. It seems that only the top page (it’s your modal) is set to transparent, not the page that’s still open underneath your modal. @roshandhabekar please check (as proposed in your other post) if this is indeed a transparency issue.


#4

@luukschoen ya its a transperancy issue with class .ion-page.show-page class opacity.


#5

@luukschoen hi man i got the issue but not getting how i will set the opacity for particular modal ,because if i modify this class it reflecting on all the pages.These classes are ion define classes we cant modify it .ion-page .show-page


#6

Use [ngClass] for modifying the class conditionally. If you close the modal, set back the opacity.


#7

@luukschoen hey man tried lots to set opacity and resolve it but i am not able to load map on android devices…


#8

Here is my working code for seting transparency when modal created/dismissed:

html

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

typescript

  getLocation() {
    this.isModal = true;
    let mapModal = this.modalCtrl.create(MapModalPage);
    mapModal.onDidDismiss((data) => {
      this.isModal = false;
      if(data) {
        this.location = data.location;
        this.locImage = data.image;
      }
    });
    mapModal.present();
  }

Modal - map not assigned to div
How to show Native Google Maps inside a Modal?
#10

This is what solved my problem:

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

#11

Where did you put this? app.scss or modal page’s scss file?

Or the page that calls Google Map modal page.


#12

This is good demo


#13

Put it on the page that the map is actually on. Put that line before anything else on that pages scss.

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

page-map-modal {
 //other scss stuff
 }

That’s how I have done it in the past. Though @wf9a5m75 is a pretty solid source of advice when it comes to native googlemaps. He created it (buy him a beer if you can). So I’d check out his advice first.


#14

As you can see in this example _gmaps_cdv_ class by default has background transparent and applied from html, body level not just its container (makes modal semi visible, calling page on the background visible). When modal is open and Google Maps is loaded it shows parent page instead of modal itself (just top navbar is seen, in this example as you can see on the right, I deliberatly removed ticks for background transparent properties of top level _gmaps_cdv_ class which made modal visible)

@jaydz adding your code didn’t solve it in my case, but @atmo code did for the moment. I won’t be surprised If I run into another problem in the future though.


#15

I have tried with the solution provider here, but could not show the google map in modal. Please see my question here.


#16

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;
}

Add the following code to the page that loads the map (the page that will be rendered inside the modal component):

ionViewWillLeave() {

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

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

}

I think this will solve not only @dimitri320’s problem, but the one reported by @setu1421 too…