Adding ion-tab-bar on to google maps at the bottom

#1

I am using Ionic4 to build an app around google maps using native maps. Everything works fine except that I am unable to put a tab bar at the bottom of the screen. When I do, it overlaps the whole screen it seems and map becomes non clickable. Following is the html snippet I am using -

<ion-content padding>
  <div id="map_canvas">
      <ion-searchbar>
        </ion-searchbar>
      <ion-tabs>
          <ion-tab-bar slot="bottom">
            <ion-tab-button tab="account">
              <ion-icon name="heart"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="listview">
              <ion-icon name="clipboard"></ion-icon> 
            </ion-tab-button>
            <ion-tab-button tab="add-circle">
              <ion-icon name="add-circle"></ion-icon> 
            </ion-tab-button>
          </ion-tab-bar>
       </ion-tabs>  
  </div>

It seems to works if I remove <ion-tabs> but then the placement is disturbed. Given below is the image as whats happening -

What am I doing wrong here?

Following seems to work but then the ion-tab-bar gets a bit hidden at the bottom -

<ion-content padding>
      <ion-tabs>
          <div id="map_canvas">
              <ion-searchbar>
              </ion-searchbar>
          </div>
          <ion-tab-bar slot="bottom">
            <ion-tab-button tab="account">
              <ion-icon name="heart"></ion-icon> 
            </ion-tab-button>
            <ion-tab-button tab="listview">
              <ion-icon name="clipboard"></ion-icon> 
            </ion-tab-button>
            <ion-tab-button tab="add-circle">
              <ion-icon name="add-circle"></ion-icon> 
            </ion-tab-button>
          </ion-tab-bar>
       </ion-tabs>  
</ion-content>

Following is the screen shot -

#2

is there a specific reason you need the tabs ‘within’ the google maps div?

did you create this project using: $ ionic start <my-project> tabs --type=angular? that creates a lot of the boilerplate for using tabs
Typically a tabs app goes root --> tabs page --> tab1, tab2, tab3…tab n, with the map page as one of the tabs

#3

Not necessarily. I just need them at the bottom of screen. Yes, I created the project using ionic cli. Another issue I ran into is that maps opens and works fine in browser but in real time device, it simply gives a white screen. I tried to use dev app but no logs are produced there as well. Is it anything with Ionic4?