title: How to show Native Google Maps inside a Modal?
body: <p>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 <a href="https://forum.ionicframework.com/t/native-google-maps-not-working-inside-a-modal/89171" rel="nofollow noreferrer">here</a> and followed the solution give there like below in <strong>app.scss</strong>:</p>
  
  <pre><code>ion-app._gmaps_cdv_ .nav-decor{
    background-color: transparent !important;
  }
  </code></pre>
  
  <p>But, it did not fix my problem. Still can't see the google map in the modal.</p>
  
  <p>Then tried to follow another <a href="https://forum.ionicframework.com/t/native-google-maps-not-working-inside-a-modal/89171/8?u=setu1421" rel="nofollow noreferrer">solution</a> but still can't manage to appear the google map in the modal.</p>
  
  <p>In <strong>home.ts</strong>:</p>
  
  <pre><code> openMap() {
      this.isModal = true;
      let mapModal = this.modalCtrl.create('MapFilterPage');
      mapModal.onDidDismiss((data) =&gt; {
        this.isModal = false;
      });
      mapModal.present();
    }
  </code></pre>
  
  <p>In <strong>home.html</strong>:</p>
  
  <pre><code>&lt;ion-content [style.opacity]="isModal ? 0 : 1" padding&gt;
        &lt;button ion-button item-right &gt;
          &lt;ion-icon name="add" (click)="openMap()"&gt;&lt;/ion-icon&gt;
        &lt;/button&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>But, when tried to use below code, the google maps is showing fine.</p>
  
  <p><code>this.navCtrl.setRoot('MapFilterPage');</code></p>
  
  <p>How to show google maps in modal properly?</p>