How to add divs below to Google Maps

ionic-v1
1

Hi buddies, I’m working on an ionic project and in a tab I placed a google map following a tutorial and it’s working OK!.
But now I want to put below some buttons (inside a div?) to trigger some actions over that map but when I try to do this the map doesn’t render.

<!--working-->    
<ion-view title="Ubicación">
    <ion-content id="maps" scroll="false" data-tap-disabled="true">
    </ion-content>
</ion-view>

<!-- not working -->
<ion-view title="Ubicación">
    <ion-content>
          <div id="maps" scroll="false" data-tap-disabled="true"></div>
          <div><p>Hello!!</p></div>
    </ion-content>
</ion-view>

Here I forked a similar pen to test it.
Can anybody help me? please.

2

you add css :

#map {

width: 100%;
height: 100%;
}

that’s why map coverage full ion-content block.
set map height as you need by:

#map {

width: 100%;
height: 90%;
}

then it will get 10% space for show <div><p>Hello!!</p></div> .

Check here:

3

thanks, that worked for me.