Google maps autocomplete integration

Ionic Framework
1

Hello,

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?

2

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

3

I am currently using this topic

But I have this error :

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

Maybe try this: https://medium.com/@alejandrolp1986/google-maps-places-y-autocomplete-en-tu-ionic-5-app-c34e314b2f5a

Looks more up to date maybe?

1 Like
5

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

<script src='https://maps.googleapis.com/maps/api/js?libraries=places&key=YOURKEY'></script>

It’s true ?

6

Think so, the autocomplete is part of the places api

7

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

8

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
9

index.html in the head

10

I do that :

<ion-header>
  <script src='http://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCaC-tzu3ZM0CW4ZAmxtzXXXXXXXXXXXXXXXXXXXX'></script>
  <ion-toolbar>

In the page where I want to add this system

11

Absolutly wrong. I said in the index.html!

12

Oh sorry !

Yes, now it’s work ! :wink:

13

But now, I have this error :

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

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

15

But why ? I don’t understand

16

Ok, I managed to fix all the errors!

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

17

Do you have an idea to solve the problem?

18

I specify that my entry is in a modal

19

Nobody for help ?..

20

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.