Google maps autocomplete integration


I would like to integrate my Google Maps Auto Complete application into an input, but I have no idea how to do it.

Do you have a complete tutorial to concretely explain how to achieve the integration?

Create a Component that includes a input and listen to the Change event (use a debounce). On Change you can then get the Google Results and show them in the way you want (mostly a list under the input is displayed). This Input should be hidden if a user selects a entry or loses the focus of the input

I am currently using this topic

But I have this error :

[ng] : Compiled successfully.
[ng]     ERROR in src/app/add-event/ - error TS2503: Cannot find namespace 'google'.
[ng]     14   GoogleAutocomplete: google.maps.places.AutocompleteService;
[ng]                              ~~~~~~
[ng]     src/app/add-event/ - error TS2304: Cannot find name 'google'.
[ng]     22     this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
[ng]                                          ~~~~~~

Maybe try this:

Looks more up to date maybe?

1 Like

In the tutorial you just sent me they say add this line :

<script src=''></script>

It’s true ?

Think so, the autocomplete is part of the places api

But where should I integrate this line? After ion-content?

Because when I add these lines :

this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
    this.autocomplete = { input: '' };
    this.autocompleteItems = []; 

I have this error :

Uncaught (in promise): ReferenceError: Can't find variable: google

index.html in the head

I do that :

  <script src=''></script>

In the page where I want to add this system

Absolutly wrong. I said in the index.html!

Oh sorry !

Yes, now it’s work ! :wink:

But now, I have this error :

TypeError: undefined is not an object (evaluating 'this.form.get')

The Error is very clear. The Object you try to use is undefined at the point of usage

But why ? I don’t understand

Ok, I managed to fix all the errors!

It works on my browser, but I have no feedback on my iOs emulator

Do you have an idea to solve the problem?

I specify that my entry is in a modal

Nobody for help ?..

Hi Charles,
I laso have same problem, but im not getting error, but I dont get address, only get latlong.

I can send you my code, but Ithink im also wrong. But at least you can see.