Unable to display Google maps within ionic card

When I try to embed the google maps within the ion-card it doesn’t show up. I tried this way:


Google maps

    <div id="gmap"></div>



But if I just use gmap div without the ion-card it works fine:

This works:

    <ion-content><div id="gmap"></div></ion-content>

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

<ion-card id="gmap"></ion-card>

Didn’t work Shows blank card.

Instead of
<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:

   <div id="googlemaps-container"></div>


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:

<ion-card class="transparent-card">
    <div #map id="gmap" style="height:100px;"></div>

and for your scss:

        background-color: transparent;