Google maps overlaying navbar

Ionic Framework ionic-v3
1

I’m getting some issues with the navbar on google maps when navigated through the sidemenu.

Currently using v2 of the google maps plugin https://github.com/mapsplugin/cordova-plugin-googlemaps
App is written in Ionic 3 with tabs and sidemenu.

I’m current going about navigating two components through the tabs and sidemenu.
The sidemenu works by navigating to tabs component and then tab.select(index), with index passed as a navParams via navController.setRoot().

Both components contain a header(navbar with sidemenu button trigger) and footer (the 2 tabs).

When navigating to the map component (first tab, if that’s important information) via tabs, it works as expected, map div’s parent having margins for header and footer.

image
chrome_2017-06-06_13-44-42.png578×916 19 KB

However, when navigating to the map component via the sidemenu, the map div’s parent will only have margins for the footer only.

The header is done as

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Map</ion-title>
  </ion-navbar>
</ion-header>

image
chrome_2017-06-06_13-47-27.png574×915 18.8 KB

This results in not being able to click the sidemenu button.