@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");
        });
    }
}

<div class="pull-left shadow-panel map" *ngIf="address">
   <div>
      <panda-map [height]="400">
      </panda-map>
   </div>
</div>