CODEWITHSUNDEEP
google-mapstypescriptionic2
user6229727
user6229727

Reputation:

Google map displayed in modal in Ionic 2

I am developing app in Ionic 2, and I want to display map in a modal. Problem is I can't get it to work. Same code works on normal page, but not in modal. I tried using web version of google maps API and even native cordova plugin, but result is the same, blank map in modal, working map on page. Any advice how to solve this?

Upvotes: 1

Views: 682

Answers (1)

Atmosuwiryo
Atmosuwiryo

Reputation: 114

You should set the underneath page to transparent.

Here is my working code for calling map modal

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

Upvotes: 1

Related Questions