How to properly display google maps in a bootstrap modal Angular 4

Question

I am working with angular 4 and AGM https://angular-maps.com/ I would like to show the map, but it only shows me as in the image, if I remove it from the modal, it shows perfectly, which would be the correct way to work ?

This shows the map:

Html code:

    <a class="btn btn-warning btn-flat" href="#modalMap" data-toggle="modal"><i class="fa fa-lg fa-map"></i></a>

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body">

                <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
                    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
                </agm-map>


        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>
    </div>

</div>

My Component:

   import { Component, OnInit } from '@angular/core';
   import { AngularFireDatabase, FirebaseListObservable } from       'angularfire2/database';

@Component({
selector: 'ap-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
title: string = 'My first AGM project';
lat: number = 51.678418;
lng: number = 7.809007;
zoom: number= 15;

 ngOnInit() {}
}

CSS:

agm-map {
height: 300px;
width: 100%;
}

Answer 1

I get the same issue. After looking for a solution in @AGM project at Github i found this and worked for me:

Hi, Import following in you component.ts

import { AgmMap } from '@agm/core';

Then before your construction get ViewChild like bellow.

@ViewChild(AgmMap)
public agmMap: AgmMap

And when you show your section then called resize trigger like.

this.agmMap.triggerResize();

Source: https://github.com/SebastianM/angular-google-maps/issues/1101

Answer 2

I had the same problems, after searching for hours, I found tips in https://github.com/SebastianM/angular-google-maps/pull/188 . The way he used triggerResize saved my day.

In xxx.component.html:

**********************TriggerGoogleMapModal*******
  <button type="button" class="btn btn-warning" (click) = "LocatePet(googleMapModal);map.triggerResize()">Locate Me</button>

**********************GoogleMapModal**************
<div >
<modal #googleMapModal >
  <modal-header>
  </modal-header>
  <modal-content>
<agm-map #map [latitude]="lat" [longitude]="lng" [zoom]="11">
<agm-marker [latitude]="lat" [longitude]="lng" ></agm-marker>
</agm-map>
</modal-content>
<modal-footer>           
  <button class="btn btn-default" (click)="googleMapModal.close()">Close</button>
</modal-footer>
</modal>
</div>

In xxx.component.ts:

import {ViewChild} from '@angular/core';
import {Modal} from 'ngx-modal';
...
export class DetailPetComponent implements OnInit {
  @ViewChild('map') myMap:AgmMap;
  ...
  LocatePet(googleMapModal){
  ....
  }
}