CODEWITHSUNDEEP
htmlcssangulargoogle-mapstypescript
Dominik Šimoník
Dominik Šimoník

Reputation: 1602

AGM Map filling container

Im using angular2 and google map component https://angular-maps.com/. The problem what im trying to solve i need map fill my container div for example:

<div id="container" style="height:100%; width: 100%">
<agm-map></agm-map>
<div>

(of course im not using style but css, thats only example)

I want that agm-map to fill container div no matter of his height or width, always fill it up. I cant solve it when agm map wants height only in px and vh.

Also resizing and responsibility would be awesome.

Upvotes: 2

Views: 3385

Answers (1)

rhavelka
rhavelka

Reputation: 2396

I can't go into too much detail, but my company has the html like this

<div fxFlex="100" class="map-full-card-content">
  <agm-map [fitBounds]="latlngBounds"></agm-map>
</div>

with a .scss file of 

.map-full-card-content {
  height: 100% !important;
  width: 100%;
  margin: 0;

  agm-map {
    height: calc(100% - 12px) !important;
    width: 100%;
  }
}

It seems to work fine for filling the container and resizing.

Upvotes: 2

Related Questions