Hur man korrekt visar Google Maps i en Bootstrap-modal i Angular 4

Jag arbetar med Angular 4 och AGM https://angular-maps.com/ Jag skulle vilja visa kartan, men den visar mig bara som på bilden, om jag tar bort den från modalen visas den perfekt, vilket skulle vara det korrekta sättet att arbeta?

Detta visar kartan:

Html-kod:

    <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>

Min komponent:

   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%;
}

Svar #1

Jag får samma problem. Efter att ha letat efter en lösning i @AGM-projektet på Github hittade jag detta och det fungerade för mig:

Hej, importera följande i din component.ts

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

Sedan, innan din konstruktion, hämta ViewChild som nedan.

@ViewChild(AgmMap)
public agmMap: AgmMap

Och när du visar din sektion kallas det sedan resize trigger som.

this.agmMap.triggerResize();

Källa: https://github.com/SebastianM/angular-google-maps/issues/1101

Svar #2

Jag hade samma problem, efter att ha sökt i timmar hittade jag tips på https://github.com/SebastianM/angular-google-maps/pull/188. Sättet han använde triggerResize på räddade min dag.

I 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>

I xxx.component.ts:

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

Relaterade artiklar