map not showing in modal bootstrap

Question

I try showing map in modal bootstrap but I have this dispaly:

enter image description here

code modal:

<div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':displaymap}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="onCloseHandledmap()"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">test</h4>
      </div>
      <div class="modal-body">
        <div class="row">
        <div class="col-sm-12">
              <agm-map  [scrollwheel]="false" [zoom]="zoom">
                 <ng-container>
                   <agm-polyline [strokeColor]="color" [strokeWeight]="weight" >
                      <agm-polyline-point *ngFor="let test of lines" [latitude]="test.latitude" 
                      [longitude]="test.longitude" >
                      </agm-polyline-point>
                  </agm-polyline>
                </ng-container>
              </agm-map>
        </div>
    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="onCloseHandledmap()" >Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

and in component I add this code:

I try with this code:

   ngOnInit() {
    $('.modal').on('shown.bs.modal', () => this.agmMap.triggerResize());
}

and with this code also:

       ngOnInit() {
        this.resizeMap();
    }

    resizeMap() {
        this.map.triggerResize();
    }

but also dispaly .. map is not show and in css I try

agm-map{ height:500px;}

Answer 1

Try to set the z-index of both, your Bootstrap modal and your map accordingly, so that the map will appear on top. Ensure that you are applying the z-index of the map container where the Google's init function is set up to act upon.

You may try to preview this change through the developers' console to ensure if this is actually your problem.

$('.modal').css('z-index', '10000'); 
$('agm-map').css('z-index', '100001');
$('ng-container').css('z-index', '100002');