How integrate Google Maps with Angular 7

How about adding maps to your application? In this article i introduce how easy it is to integrate Google Maps into Angular projects (version 7).
After creating the project the next step is to install the AGM (Angular Google Map) using the command in the terminal:

$ npm install @agm/core --save

Once the package has been downloaded, we will configure the module. Open the app.module.ts file and import the AgmCoreModule module.

app.module.ts

You will need to enter a key (line 15). To do so, visit: https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
Click GET STARTED.
The following screen presents three steps for obtaining the key to access the API.
In the first step, select Maps:

After, click in +Create a new project and give a name:

In step 3, you’ll be prompted to enable billing for your project:

Check the terms of service confirmation and continue.
The next stage asks for your personal and payment information. According to the company, “No automatic charge will be made after the free evaluation ends.” For more information, see the [c] references link.

After the process, copy the popup key. You can see the keys in the Google Cloud Platform dashboard. Click APIs and Services >> Credentials

With the API key, paste in the apiKey property in a module.
Next, we’ll open the app.component.ts and set some properties like title, lat (latitude), lgn (longitude) and zoom, as per the code below.

app.component.ts

In the component template (app.component.html), we code the <agm-map> library tag with the attributes [latitude], [longitude], and [zoom] referencing the properties of the class. We also define a label with the same attributes (line 4).

app.component.html

Finishing, not least, let’s set a height for the map in the component’s css, according to the code of the app.component.css file.

agm-map {
         height: 300px;
        }

Important! Without this setting, you can not view the map.
At the terminal, enter the command:

$ ng serve -o

The result should be this:

Source of the project in GitHub.
See you next.

Read too…

How to integrate YouTube API with Angular

References

a) Angular Google Maps — https://angular-maps.com/

b ) Generate Keys— https://kb.yoast.com/kb/generate-set-google-maps-browser-key/

c) Orientações sobre os custos da Google —

Preços e planos | Plataforma do Google Maps | Google Maps Platform | Google Cloud

https://developers.google.com/maps/billing/understanding-cost-of-use