Google maps overlaying navbar


#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.

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>

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