I am working on a component that displays a map.
@Component({
selector: "panda-map",
template: `
<div class="map" [style.height.px]="height">
</div>
`
})
export class PandaMapComponent implements OnInit {
@Input() height: string = "400";
@Input() scroll: boolean = false;
map: google.maps.Map;
constructor(
private readonly element: ElementRef,
private readonly logger: NGXLogger) {
}
ngOnInit(): void {
const div = this.element.nativeElement.querySelector("div");
if (this.map)
return;
this.map = new google.maps.Map(
div,
{
zoom: 8,
center: { lat: -26.1714402, lng: 28.0050053 },
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: this.scroll
});
google.maps.event.trigger(this.map, "resize");
google.maps.event.addListener(this.map, "idle", function () {
google.maps.event.trigger(this.map, "resize");
});
}
}
To display the map in a parent component, use the following code:
<div class="pull-left shadow-panel map" *ngIf="address">
<div>
<panda-map [height]="400">
</panda-map>
</div>
</div>
The address on the map is updated periodically.
When the map is created for the first time, it functions correctly. However, if the address is set to null and then changed to a new value, the map only displays a grey box.
Despite trying various ways to refresh the map, none of them have resolved the issue.
Clicking "show/hide" the first time will draw the map, but subsequent clicks result in just a grey box.