Google maps places autocomplete using Angular 2

Hello all,

Entering location manually could be the most annoying part any user can experience while using your application.

Maps Places autocomplete feature could be added to any particular application written in any specific language. Here we will do it using angular 2.

Angular or Angular 2/4  the latest buzz in the Javascript world is considered the best amongst many Javascript frameworks.

Before we proceed we need an angular project which we will create using angular cli.

Angular CLI

You all can refer to this Angular CLI.

1. npm install @angular/cli -g
2. ng new my-app
3. cd my-app
4. ng serve

note: MAC users should use npm install with administrative permissions (use sudo before command).

Now we need a package for using google maps components to achieve what we started on.

Angular Google Maps(AGM)

Angular Google Maps(AGM) contains serveral components to use google maps and its several components into your applications.

We use it by installing packages to our angular project.

• Install agm/core package:  

                  npm install @agm/core --save-dev

• Install types/googlemaps package:

                   npm install @types/googlemaps --save-dev

Now since we are done with the setting up project for angular 2, Lets get into the actual coding part of it which is even more simple than this.

Implementation

In your app.module.ts file add an import for AgmCoreModule.

                   import { AgmCoreModule } from '@agm/core';

now we need to import this in imports section

                   imports: [
                       AgmCoreModule.forRoot({
                                     apiKey: 'your api key from google developers console',
                                     libraries: ["places"]
                        })
                   ]

In your app.component.html file add this code snippet:

                    <div class="container">
                  <h1>Google Maps Places Autocomplete Using Angular 2</h1>
                  <div class="form-group">
                <input type="text" placeholder="Search for Location" autocorrect="off" autocapitalize="off" spellcheck="off" class="form-control" #search>
                  </div>
                   </div>

In this code we have used #search as a local variable which is of type ElementRef which will contain the whole input tag it placed in. We can access the value of this input text box using search.value.

For styling I have added bootstrap in this project.

Now coming on to the main logic for autocomplete feature. In your app.component.ts file add import for MapsAPILoader.

                      import { MapsAPILoader } from '@agm/core';
                     import {} from '@types/googlemaps';
                     import { ViewChild, ElementRef, NgZone } from '@angular/core';

Now inside the class AppComponent add this code: 

                    @ViewChild('search') public searchElement: ElementRef;

            constructor(private mapsAPILoader: MapsAPILoader, private ngZone: NgZone) {}

            ngOnInit() {
         this.mapsAPILoader.load().then(
     () => {
     let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, { types:["address"] });

     autocomplete.addListener("place_changed", () => {
     this.ngZone.run(() => {
     let place: google.maps.places.PlaceResult = autocomplete.getPlace();
     if(place.geometry === undefined || place.geometry === null ){
     return;
     }
     });
      });
     }
         );
            }

Now lets understand what we did in the above code. 

First we declared a public variable searchElement of type ElementRef and we referred it to the local variable search used in our HTML file using ViewChild. 

After that we added a Listener on our autocomplete variable which loads the google maps places as you write text in the input box.

Final Output will look like this: 

And for people who like to do it by watching video can watch the following video for reference.

 

And Do visit this page for more Javacript posts.

Thank You.