Angular-google-maps: मानचित्र की ऊंचाई को स्क्रीन आकार में कैसे फ़िट करें

मैं एजीएम टैग को दो कंटेनर तत्वों में लपेटता हूं

<div class="outer-wrapper">
  <div class="map-wrapper" id="wrapper" #wrapper>
    <agm-map
      [latitude]="latitude"
      [longitude]="longitude"
      [scrollwheel]="true"
      [zoom]="zoom"
      (idle)="idle()"
      (centerChange)="centerChange($event)"
      id="AgmMap"
      #AgmMap>
      <agm-marker 
         [latitude]="latitude"
         [longitude]="longitude"
         [markerClickable]="true"></agm-marker>
    </agm-map>
  </div>
</div>

फिर मैंने बाहरी कंटेनर को 100% पर सेट किया, आंतरिक कंटेनर को कुछ मनमानी ऊंचाई पर सेट किया (इससे कोई फर्क नहीं पड़ता),
और इस तरह सीएसएस के माध्यम से एजीएम तत्व 100% तक।

.outer-wrapper {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;

  .map-wrapper {
    height: 400px;

    agm-map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  }
}

मैं फिर निष्क्रिय, केंद्र परिवर्तन, और घटनाओं का आकार बदलने के लिए घटक में निम्नलिखित कार्यों का उपयोग करता हूं

@HostListener('window:resize')
  onWindowResize() {
    this.onResize();
  }

  ngAfterViewInit() {
    this.renderer.setElementStyle(
      this.wrapper.nativeElement, 'height',
      (window.innerHeight) + 'px'
    );
  }

  onResize() {
    // resize the container for the google map
    this.renderer.setElementStyle(
      this.wrapper.nativeElement, 'height',
      (window.innerHeight ) + 'px'
    );

    // recenters the map to the resized area.
    this.agmMap.triggerResize().then(() =>  
       this.agmMap._mapsWrapper.setCenter({lat: this.centerLat, lng: this.centerLng}));
  }

  // idle fires after paning or zooming is done. 
  // This is where we want to capture the center of the map.
  // This way if the user resizes, the center is preserved.
  idle() {
    this.centerLat = this.changeLat;
    this.centerLng = this.changeLng;
  }

// this event fires whenever any event changes the center. Panning, zooming, or resizing.
  centerChange(event: any) {
    if (event) {
      this.changeLat = event.lat;
      this.changeLng = event.lng;
    }
  }

निम्नलिखित चर भी सेट करें

@ViewChild('AgmMap') agmMap: any;
  @ViewChild('wrapper') wrapper: ElementRef;

public latitude: number;
  public longitude: number;
  private centerLat: number;
  private centerLng: number;
  public zoom: number;

  private changeLat: number;
  private changeLng: number;

बस सुनिश्चित करें कि आप रेंडरर का उपयोग @ कोणीय/कोर के साथ-साथ HostListener . से भी करते हैं

नमस्ते,

शुभ दिवस।

आकार बदलने के लिए काम करता है, त्वरित प्रश्न, मैं इसे पहले लोड पर कैसे सेट करूं? जब पृष्ठ वेब ब्राउज़र में लोड होता है, तो क्या इसका आकार वर्तमान स्क्रीन में फिट करने के लिए है? धन्यवाद।

सादर।
जे जे

कोई बात नहीं :)