Google Maps JavaScript API With Angular — 10

Get Nearby Places and Images using Google Maps JavaScript API

We developers use a lot of 3rd Party API’s and one such API is Google’s JavaScript API. With the help of this API we can access nearby places based on labels like schools, zoo, museum, art_gallery and many other tourist attractions moreover Google also provides images for these locations. So we’ll use this data to display in an Angular application.

Create Angular Application

We’ll first create an angular application, my angular version is 10 but it’ll work with previous versions as well.

ng new gmapsExample

The above command creates the angular application but it’ll ask few inputs regarding angular routing and SCSS and I have enabled the angular-routing and chose SCSS styling.

Type Definitions for Google Maps JavaScript API

npm i @types/googlemaps

We need an npm package to access the google API in angular application, so run the above command to add it to your application. This still may not work, we need to add it to tsconfig.app.json in types field.