I am in the process of developing a material dialog to collect user location information using AGM (angular google maps). I have successfully implemented a map on my main page, but when the dialog is opened, it only shows a blank space instead of the map. Adjusting the CSS height changes the size of the white area.
Does anyone have any insights or suggestions to fix this issue?
Below is the HTML code for the dialog...
<h1 mat-dialog-title>Where do you work?</h1>
<div mat-dialog-content>
<mat-form-field>
<input matInput placeholder="enter work location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
<agm-map id="capture-work-map" [latitude]="coordinates.lat" [longitude]="coordinates.lng" [zoom]="zoom">
<agm-marker [markerDraggable]="true" [latitude]="coordinates.lat" [longitude]="coordinates.lng"></agm-marker>
</agm-map>
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Cancel</button>
<button mat-button [mat-dialog-close]="coordinates" cdkFocusInitial>Update</button>
</div>
Here's the CSS code for the dialog...
#capture-work-map {
height: 300px;
}
The TypeScript code for the dialog...
import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {Coordinates} from '../model';
import {FormControl} from '@angular/forms';
@Component({
selector: 'app-work-dialog',
templateUrl: './work-dialog.component.html',
styleUrls: ['./work-dialog.component.css']
})
export class WorkDialogComponent implements OnInit {
@ViewChild('search') public searchElementRef: ElementRef;
public searchControl: FormControl;
private coordinates: Coordinates;
constructor(
public dialogRef: MatDialogRef<WorkDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: Coordinates
) {}
ngOnInit() {}
onNoClick() {
this.dialogRef.close();
}
}
The TypeScript code that opens the dialog...
captureWorkLocation() {
this.ngZone.run(() =>
this.dialog.open(WorkDialogComponent, {
width: '90vh', height: '90vh',
data: this.user.work
}).afterClosed().subscribe(result => {
this.user.work = result;
})
);
}