2

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.

Dominik Šimoník
  • 1,442
  • 10
  • 17

1 Answers1

2

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.

rhavelka
  • 2,283
  • 3
  • 22
  • 36
  • Can you explain how to create that latlngBounds variable please? – Becario Senior Apr 24 '18 at 20:04
  • https://stackoverflow.com/questions/1556921/google-map-api-v3-set-bounds-and-center?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa This is a good resource. I essentially format my points to be added to the map and do the highest rated comment in the link. I this all in the api load function `this.mapsAPILoader.load().then(() => {` – rhavelka Apr 26 '18 at 18:51