Why the map displays with very small height

[t170815518]

Hi everyone, I am new to Vue.js and this package.
My code is:

    <b-card
        title="Card Title"
        style="max-width: 20rem;"
        class="mb-2"
    >
      <GMapMap
          :center="{ lat: 51.093048, lng: 6.84212 }"
          :zoom="7"
          map-type-id="terrain"
          style="width: 500px; height: 300px"
      ></GMapMap>
    </b-card>

There is no restriction on height, but the display result is :

The map always displays the correct width but not the height. The same situation when I try without card layout. How to deal with it?

Thank you in advance!

[fawmi]

You can style it however you want.

`
.vue-map {
height: 20rem;
}

`