Google Maps in Typescript or Angular 2

Question

How can I use Google Maps Javascript API in Typescript or actually in Angular 2?

Yes, there are libraries like https://github.com/SebastianM/angular2-google-maps there which I can use but they don't have complete support like Events and Places Libraries or Ground Overlays(or maybe I can find a way from the documentation)

So, is there I can directly access library from Google only as its latest version at all times, also has all the functionalities?

If, it ain't possible is there some way I can import some Javascript or some other work around?

Thanks

Answer 1

In the terminal run the following command to add the google map library

npm install @types/googlemaps --save

Add your api key into index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

Finally insert imports into module.ts

import {} from '@types/googlemaps';

Now you can create google map using

new google.maps.Map(<htmlElement>, mapOptions());

Answer 2

In the terminal, run the following command to add the library:

npm install @types/googlemaps --save

Then in /src/typings.d.ts insert the following line to the list of imports:

import {} from '@types/googlemaps';

Answer 3

You just import it into your project. If you use webpack, look up how to add external libraries. If you are using the angular-cli, just add the JavaScript file to the list of scripts in the angular-cli.json. Once you do that, just declare it on top of the component where you want to use it, with:

const google: any;

And then you can call all the methods to do use the actual library.