Wie man Google Maps in einem Bootstrap modal richtig anzeigt Angular 4

Question

Ich arbeite mit eckigen 4 und AGM https://angular-maps.com/ Ich möchte die Karte zeigen, aber es zeigt mir nur wie im Bild, wenn ich es aus dem Modal entfernen, es zeigt perfekt, welches wäre die richtige Art zu arbeiten?

Dies zeigt die Karte:

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> 

Meine Komponente:

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

ich das gleiche Problem. Nach der Suche nach einer Lösung in @AGM Projekt auf Github fand ich diese und arbeitete für mich:

Hallo, Import in Ihnen folgenden component.ts

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

Dann vor Ihrer Konstruktion erhalten ViewChild wie Balg.

@ViewChild(AgmMap) 
public agmMap: AgmMap 

Und wenn Sie zeigen Sie Ihren Abschnitt dann Resize-Trigger wie genannt.

this.agmMap.triggerResize(); 

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

Answer 2

I verwendet triggerResize Lösung, aber es hat nicht funktioniert für mich so dass ich nur die Karte in den Körper gelegt und unsichtbar machen hängen Sie ihn dann in den modal und mach es sichtbar.