Currently, I am engrossed in a small project that involves the utilization of Google Maps JS API (latest version). The front end is constructed on Angular 5 with Typescript. My goal is to display a modal window over the map as soon as the user clicks anywhere on it. Although I have successfully triggered the opening of the modal, I am encountering issues with animations not working properly, DatePicker failing to render, and the inability to close the modal by clicking on the button. Interestingly, the modal seems to partially work after resizing the browser window; for instance, if I click on the 'close' button and then resize the browser window, the modal closes correctly. It's worth noting that I am using an angular-material modal. Surprisingly, after the map loads, it alters the top menu styles which are completely unrelated.
Efforts to programmatically call the resize event for the map were futile.
The code for map.component.ts:
Including necessary imports...
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
Including constructor and other variables...
initMap() {
Setting up google maps and adding a click listener...
}
private addMarker(location) {
Adding markers and showing the meeting modal...
}
private showMeetingModal() {
Displaying the modal...
}
ngOnInit() {
Initializing the map...
}
}
The code for map.component.html:
<div #mapDiv id="map"></div>
I believe the code for the modal is not relevant considering it works flawlessly in other parts of the application. Thank you for your attention!
UPDATE: Here is a link to a stackblitz example!
https://stackblitz.com/edit/angular-ulwfo2