Unable to display Google maps within ionic card

Ionic Framework ionic-v3
1

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

<ion-card-header>

Google maps

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

</ion-card-content>

</ion-card>

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:

<ion-card-header>
    Gmaps
</ion-card-header>

<ion-card-content>
    <!-- Add card content here! -->
    <div id="map" style="width: 200px; height: 200px;"></div>

</ion-card-content>

</ion-card>

What could be issue for this? Are there any work arounds for this? Please help.

2

You could try

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

Didn’t work Shows blank card.

4

Instead of
<div #map id="map"></div>

try…
<ion-card #map id="map"></ion-card>

5

Did anyone got the solution for this issue ? Or can anyone explain the behaviour. Thank you.

6

Yes I did this way:

<ion-card>
   <div id="googlemaps-container"></div>
</ion-card>
7

Hi

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.

Thanks
Paul

8

I added it within the ion-content of the card

<ion-card>
    <ion
</ion-card>
9

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>
</ion-card>

and for your scss:

    .transparent-card{
        background-color: transparent;
    }