How integrate Google Maps with Angular 7

Image for post
Image for post

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.

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:

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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.

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).

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:

Image for post
Image for post

Source of the project in GitHub.
See you next.

Read too…

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 —

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

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store