Playing with Angular Google Maps (AGM) in Angular 6

https://angular-maps.com/guides/getting-started/


Here we will have the simple step by step tutorial on places searches using Angular 6 with Google Places and Google Maps API. There are a lot of features in Google Places API, including search places, places autocomplete and places nearby. The scenario for this tutorial just shows maps with searched place.

Before the move to the main steps, make sure Node.js is installed and runnable correctly. Open the Terminal or Node command line then type this command.

node -v

(My current npm version is 5.5.1,node is 9.2.0).

1) Setup Google Places and Maps Javascript API

Open your browser then go to ‘https://console.developers.google.com‘ address. Login using your Google account and you will be redirected to API dashboard.
To create project, If you don’t have a project yet, click the drop-down menu on the right side of Google APIs logo.
and hit “New Project” .

Fill the project name and click `Create` button.

After creating a new project, it will be back to project dashboard. Click the `Enable APIs and Services` button then click `View All` in the Maps category.

Find and click `Google Places API Web Service`.

Click the `ENABLE` button to enable the Google Places API Web Service.

Back to the project dashboard then do the same way to enable Google Maps Javascript API. Now, click the `Credentials` menu on the left menu then click `Create Credentials` drop-down button.

Choose `API Key` then it will create an API Key. Write down and save to your notepad or text editor for use later.

2) Starting with a basic project structure

As the most of us — I am a lazy person, so really felt in love with such powerful helper tool: Angular CLI. It’s a magic wand of your project, so don’t be scared of it.

npm i -g @angular/cli

Run the following commands to create a new Angular project with Angular CLI:

ng new myMap

Done now we dont need any local web server for deployment. Just run in your terminal:

cd myMap
ng serve


Now just hit the url in your browser http://localhost:4200/.
We have setup the project and successfully run, Now we will create our full app in two phase: first will be google address autocomplete and second phase will be adding Angular Google Maps.

3) Google address autocomplete

So lets install ngx-google-places-autocomplete This module is a wrapper for Google Places Autocomplete js library. To install this we will use below CLI command –

npm install ngx-google-places-autocomplete

Now add google library in your index.html file

<script src="https://maps.googleapis.com/maps/api/js?key=<Your API KEY>&libraries=places&sensor=false&language=en"></script>

Here replace <Your API KEY> with api key you have generated.

Now we will add module in app.module.ts

import { GooglePlaceModule } from "ngx-google-places-autocomplete";

so our will look like

Integration is done now lets add Add directive ngx-google-places-autocomplete to our component template, so at last our input field will be look like.

<input ngx-google-places-autocomplete  #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/>

Here on onAddressChange we have handled the address in public handleAddressChange(address: Address). Which we have created in app.component.ts, and we will add GooglePlaceDirective module in app.component.ts

import { GooglePlaceDirective } from 'ngx-google-places-autocomplete/ngx-google-places-autocomplete.directive';


What we did hear is set default longitude and latitude and over address change we updated those with the response.

4) Angular Google Map (AGM)

Install Angular Google Maps using below CLI command.

 npm install @agm/core --save

Now lets setup the Setup YOUR_API_KEY in NgModule which obtained in above process.

Now lets add google templet in our template.

for styling we will add height and width to agm-map

agm-map {
    height: 350px;
}

Output:


References:
Getting started with Angular Google Maps (AGM)
ngx-google-places-autocomplete