I am trying to add Google Map as a component to my Angular project. I added the API to index.html as follows:
<body>
<script src="https://maps.googleapis.com/maps/api/js?key=MY KEY"></script>
<app-root></app-root>
</body>
And a map container and a button to show the map in my app.component.html as follows:
<button type="button" (click)="open()">Call Map</button>
<div id="map" style="height: 100vh; width: 100vw"></div>
And the open function to app.component.ts as follows:
export class AppComponent {
open() {
new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 0,
lng: 0,
},
});
}
}
Everything is fine. I can open the map when I click the button. I guess because of the Asynchronous nature of the Google map API, every time after compiling the code in vscode, I get the following error:
Do you have any solution for this?
Note: I have added @type/googlemaps to the project and Angular Google Maps (AGM) and other similar libraries are not an option.