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

[Pitouli]

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! 😆

[brian-singer]

Thats cool but whats more interesting is connecting the search bar with SebM Maps.

sebMap.getNativeMap().autocomplete ...

The reason why you have to click in the map is because it is a separate component.

I am working on a solution with Sebastians Map API, Google Key, Search Bar with Places from the 'getNativeMap()'. I need some time and await NPM Release 0.12.0

Stay tuned for a solution.
PS If you want to prepare for a solution you should obtain a Places API Key from google. Here

[brian-singer]

I personally have the problem when I do that I get the error the map was not found.

[sebholstein]

Ok guys, I'll close this as this is not an issue report or a feature request. Feel free to comment below though.

[Pitouli]

@cesargalindo shared a solution for the "map is not updating without a click" issue I had
https://gitter.im/SebastianM/angular2-google-maps?at=576197ff36c83a880205fd64

I've updated the plunker accordingly

[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. 😃

[brian-singer]

@fernando-gl right. My code is almost 1:1

[brian-singer]

Do you call autocomplete after ngAfterContentInit ?

[Ferezoz]

@brian-singer I am calling it from ngOnInit but i just tried on ngAfterContentInit and its working good also.

[daBishMan]

I am trying to get this work like you suggested @fernando-gl but I can't get it to work, can you share a plunker or something, I am using angular 2 final, I am not sure this will change anything or not

[warapitiya]

@daBishMan Yes, It's changing. Angular 2.0.0 removed bootstrap function.

@SebastianM Looks like it's a really good time to create some new Plunkers for different, different examples.

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

[Ferezoz]

Hello @daBishMan , as @andriesvn01 said, you just have to change your import from main.ts to app.module.ts like this:

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

@NgModule({
    imports: [
        BrowserModule,
        AgmCoreModule.forRoot({
            apiKey: 'myApiKey',
            libraries: ['places']
        })
    ],
    declarations: [
        AppComponent
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

You can see the updated "getting started" here:

https://angular-maps.com/docs/getting-started.html

[mLaird]

@fernando-gl I use your above code for my app.module.ts The map displays, but I get the Console error: You have included the Google Maps API multiple times ... It seems to load 4 times. Do you have any thoughts about the source of the problem, and how to fix it?

[Ferezoz]

@mLaird Hello, have you tried removing the library from your index.html?

[mLaird]

@fernando-gl I removed the Google Map link in index.html and the multiple load problem went away. Thanks very much. You guys have built a slick map app.

[viktorstaikov]

Hi @fernando-gl , I'm using your solution, but I can't load the Places library. I'm currently on Angular 4+ and agm/core 1.0.0-beta.0.

I'm importing the module as this:
AgmCoreModule.forRoot({ apiKey: '<--API_KEY-->', libraries: ['places'], language: 'bg' }),
and then in the component I have:

constructor(
...
    private _loader: MapsAPILoader,
...
    ) { }

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

The error I get is: Cannot read property 'Autocomplete' of undefined

What might be causing this issue?

[guizmo]

late but..
i think it's google.maps.places.AutocompleteService

"AutocompleteService" not "Autocomplete"

[Ferezoz]

Hello @viktorstaikov , sorry for being late, have you managed to get it working already? I haven't used this for a while, so I don't know If something has changed, If you want i can try to get it working again.

[viktorstaikov]

Yeah, after some tinkering and installing deps I've got it working. It wasn't something with the solution itself.

[Ferezoz]

@viktorstaikov Great to hear that!, good luck coding!