When I try to embed the google maps within the ion-card it doesn’t show up. I tried this way:
But if I just use gmap div without the ion-card it works fine:
One more way I tried is that, When I specify the height and width for the div which shows the map in pixels within the ion-card it works:
<!-- Add card content here! -->
<div id="map" style="width: 200px; height: 200px;"></div>
What could be issue for this? Are there any work arounds for this? Please help.
You could try
Didn’t work Shows blank card.
<div #map id="map"></div>
<ion-card #map id="map"></ion-card>
Did anyone got the solution for this issue ? Or can anyone explain the behaviour. Thank you.
Yes I did this way:
I’m still struggling with this - could you let me know what style changes you had to make to get the map within the card working.
I added it within the
ion-content of the card
Found a dirty way to do it, but this might help us figure it out:
<div #map id="gmap" style="height:100px;"></div>
and for your scss: