Google map inside ion-slides display issue

ionic-v1
1

Hi all I’ve been trying to show a Google map inside ion-slides but it’s not rendering properly.

I’ve created a code pen for you guys here http://codepen.io/4spins/pen/dXPBGy

If I move the <div id="map" data-tap-disabled="true"> outside of the Swipper control (and initialize the map in the another callback e.g. ionic.Platform.ready) then it’s showing up nicely. Any feedback would be highly appreciated as I’m losing my mind here :stuck_out_tongue:

2

Answering my own question for anyone else stuck in this situation. As user jacky from SO pointed out

So this class seems to be the culprit.

.swiper-slide img {
    max-height: 100%;
}

Add this to the CSS to simply override it.

#map img {
    max-height: none !important;
}

After this everything worked as expected.