CODEWITHSUNDEEP
androidcssgoogle-mapswebkitonsen-ui
Hung Tran
Hung Tran

Reputation: 815

OnsenUI: Google Maps has 0 height when inside <ons-page> (Android 2.3/Webkit only)

When using OnsenUI, if I put Google Maps inside ons-page, I can't make the map to have full height of the page/browser, tried everything but its height was still 0 (the map is not display at all). But if I move it outside ons-page the it works well with full width and height. Because of my template's structure I can't move the map outside of ons-page

This problem ONLY HAPPENS in Android 2.2 or 2.3. If you want to see it on desktop, you can use Midori browser. The map is displayed ok in Firefox and Chrome or in Android 4.x's Webkit.

Here is the codepen: codepen.io/tranduyhung/pen/RNNBEQ

I tried many solutions but still couldn't make it work. If you have any advice I really appriciate!

P/S: Just in case you need Midori browser, download it here http://midori-browser.org/download/choose/. I use 0.4.3

Upvotes: 1

Views: 193

Answers (1)

Guillermo Gutiérrez
Guillermo Gutiérrez

Reputation: 17819

The issue seems to be the div inside the page content div, generated by the ons-page directive, which has a computed height of 0px. You can try adding a modifier to the ons-page, to set a custom style for this div, like this:

HTML:

<ons-page modifier="map">
  <ons-toolbar>
    <div class="center">My App</div>
  </ons-toolbar>
  <div id="map-canvas"></div>
</ons-page>

CSS

.page--map .page--map__content>div{
  height:100%;
}

Check this modified pen: http://codepen.io/anon/pen/emNpzX

Upvotes: 1

Related Questions