Best way to call page from ion-segment

Ionic Framework ionic-v3
1

Hey guys,

Newbie here, I have a ion-segment which switches from a ion-item-group to a map. Everything works except when I switch to the map the background becomes transparent and when I switch back to the item-group that transparency from the map comes with it.

Is there a way that I can have both as separate pages and call them based on the selection? This is what I currently have in my html file.

<ion-header>
  <ion-navbar>
    <ion-title>{{ 'CONTACT.TITLE' | translate }}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding class="container">

 <ion-segment [(ngModel)]="contact_type" (ionChange)="updatePage(contact_type)" color="primary" class="pad_item">
    <ion-segment-button value="phone">
      Phone Numbers
    </ion-segment-button>
    <ion-segment-button value="locations">
      Office Locations
    </ion-segment-button>
  </ion-segment>
<div class="container">
    <ion-item-group [hidden]="contact_type!='phone'" >
  <ion-item-divider >{{ 'CONTACT.EMERGENCY' | translate }}</ion-item-divider>
  <ion-item><a href="tel:901-528-4465"><p>901-528-4465</p></a></ion-item>

  <ion-item-divider >{{ 'CONTACT.REPORT_STREET' | translate }}</ion-item-divider>
  <ion-item><a href="tel:901-820-7878"><p>901-820-7878</p></a></ion-item>

 <ion-item-divider>{{ 'CONTACT.REPORT_OUTAGE' | translate }}</ion-item-divider>
  <ion-item><a href="tel:901-544-6500"><p>901-544-6500</p></a></ion-item>

<ion-item-divider class="item-text-wrap">{{ 'CONTACT.BILLING_QUESTIONS' | translate }}</ion-item-divider>
  <ion-item><h2>{{ 'CONTACT.CONTACT_HOURS' | translate }}</h2></ion-item>
  <ion-item><a href="tel:901-544-6549"><p>901-544-6549</p></a></ion-item>
  <ion-item><a href="mailto:MLGWCustomerCare@mlgw.org"><p>MLGWCustomerCare@mlgw.org</p></a></ion-item>
  </ion-item-group>

</div>
<div id="map" #map [hidden]="contact_type!='locations'"></div>
</ion-content>

I’m using this in my scss file.

 ion-app._gmaps_cdv_ .nav-decor {

    background-color: transparent !important;
  }

which causes the transparency. If I leave this out the map doesn’t show. Any suggestion on how to accomplish this?

Thanks