Add Google Maps API to Angular project as a component

Question

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.

Chris · Accepted Answer · 2020-05-04 01:07:18Z

1

Add googlemaps type in tsconfig.app.json

tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["googlemaps"]
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}

edited May 4, 2020 at 1:07

answered May 3, 2020 at 22:52

Chris

2,45616 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Reza Nikfal Over a year ago

Hi Chris, As I mentioned in the last line of the question, I have already added the type.

Chris Over a year ago

@M.Reza did you add in tsconfig.app.json?

Reza Nikfal Over a year ago

Yes, I added the "types": ["google"] but still get the error

Chris Over a year ago

@M.Reza add package.json and tsconfig.app.json to the description

Reza Nikfal Over a year ago

I have added to the question ↑

|

Collectives™ on Stack Overflow

Add Google Maps API to Angular project as a component

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related