title: Showing modal over google map - Angular 5
body: <p>I'm working on a small project, where I want to use Google Maps JS API (current version).  The front end is on Angular 5 with Typescript.  The thing is I want to show a modal window over the map when the user clicks anywhere on the map. I managed to trigger modal opening without any issues, although animations on modal don't work, DatePicker isn't rendered, neither can I close it by clicking on the button. It seems to change it's state to semi-working after resizing the browser window, for example when I click on the 'close' button and then resize the browser window, it closes correctly. I am using an angular-material modal. In other places in app the modal works just fine.  Also after the map is loaded, it changes top menu styles which are not related whatsoever.
  I've tried to call the resize event for map programmatically and it didn't change anything.
  Code for map.component.ts:</p>
  
  <pre><code>import { Component, Inject, ElementRef, ViewChild, OnInit } from     
  '@angular/core';
  import { MatDialog } from '@angular/material';
  import { MeetingDialogComponent } from '../meeting-dialog/meeting-dialog.component';
  
  declare const google: any;
  
  @Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
  })
  export class MapComponent implements OnInit {
      constructor(public dialog: MatDialog, private router: Router) {
      }
  
      @ViewChild('mapDiv') mapDiv: ElementRef;
      public map: google.maps.Map;
      private markers: google.maps.Marker[] = [];
      private clickListener: google.maps.MapsEventListener;
  
      initMap() {
          this.map = new google.maps.Map(this.mapDiv.nativeElement, {
              center: { lat: 53.921, lng: 19.037 },
              zoom: 8,
              disableDefaultUI: true
          });
          this.clickListener = this.map.addListener('click', (event) =&gt; {
              this.addMarker(event.latLng);
          });
      }
  
      private addMarker(location) {
          let marker = new google.maps.Marker({
              position: location,
              map: this.map
          });
          this.markers.push(marker);
          this.showMeetingModal();
      }
  
      private showMeetingModal() {
          this.dialog.open(MeetingDialogComponent, {
          });
      }
  
      ngOnInit() {
          this.initMap();
      }
  }
  </code></pre>
  
  <p>Code for map.component.html:</p>
  
  <pre><code>&lt;div #mapDiv id="map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I think code for modal is irrelevant, since it works correctly in other places in the application. Thanks in advance for your time!</p>
  
  <p><strong>EDIT: Here is a link for stackblitz example!</strong><br>
   <a href="https://stackblitz.com/edit/angular-ulwfo2" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ulwfo2</a></p>