How to Support "Google Place Autocomplete" (with example)

Having spent tens of hours to find how to support “Autocomplete”, I share with you my solution (which is technically completely independent from the angular2-google-maps API at the moment, since I did not succeeded in reusing the LazyMapLoading 😛 ).

Here is a plunker which shows how to: http://plnkr.co/edit/NtfCPol50mlwGoiB8UZu

What I’ve done: 1/ I’m loading the Google Maps API (with the “places” library) directly in the index.html (line 28), so I have to use the “no lazy load” functionality in the main.ts (line 135). Note that in my personal implementation, I am not using “Bootstrap”, but I declare the providers in the @Component 2/ I make a reference to the Google Map API (main.ts line 19) 3/ I connect the Autocomplete in the ngOnInit (main.ts lines 63 to 73)

Tip : main.ts line 63 I have a reference to the input field. Here, I simply used a “getElementByID()”. In my real project, I needed to use a “querySelector()”… I precise in case you have issues selectionning the input filed…

IMPROVEMENT (if someone know how to) : How could we use the “Lazy Loader”? I do not know how to access the google reference after lazy loading.

BUG? Why when the location changed and that I change the latitude and longitude it’s only taken into account if I click the map? You could put an alert (or simply read the console) and you will see that the modification of the values is not made after the click. => I’ve updated the plunkr thanks to a solution provided by @cesargalindo https://gitter.im/SebastianM/angular2-google-maps?at=576197ff36c83a880205fd64

PS: yeah, it’s that easy. But it’s my first Angular project, and I’m learning directly by doing. So simple tasks become quite difficult! 😆

[Ferezoz]

@Pitouli hello, thanks for your solution, i have used it and found a better way to support Autocomplete, because when using your solution i had multiple google api warning and my map crashed when using SebmGoogleMap directive.

Here is the solution:

In my main.ts

import {GOOGLE_MAPS_PROVIDERS, provideLazyMapsAPILoaderConfig} from 'angular2-google-maps/core';

bootstrap(AppComponent, [
    GOOGLE_MAPS_PROVIDERS,
    provideLazyMapsAPILoaderConfig({
        apiKey: 'myApiKey',
        libraries: ['places']
    })
]);

And in my app.component.ts

import {MapsAPILoader} from 'angular2-google-maps/core';

declare var google: any;

//@Component...

//export class...

constructor(
        private _loader: MapsAPILoader) {
    }

autocomplete() {
        this._loader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocompleteInput"), {});
            google.maps.event.addListener(autocomplete, 'place_changed', () => {
                let place = autocomplete.getPlace();
                console.log(place);
            });
        });
}

You now can get rid of: <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

It also worked with :

google.maps.Geocoder

so i think it works with all the google maps object classes.

Hope it helps. 😃

[andriesvn01]

Instad of using bootstrap in main.ts, Just use

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'YOUR API KEY',
      libraries: ['places']
    }),

in your app.module.ts.