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.
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.
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.
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.
How to integrate YouTube API with Angular
What do you think of Youtube channel videos in your Angular application? This article I show how easy it is to…
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 —