TUTORIAL - How to create the Google Adresses AUTOCOMPLETE INPUT

Hi everyone, I’m going to show you the quickest and easiest way to access the autocomplete input of google maps.

STEP 1 :
Take the “search with results” element


STEP 2 :
Scroll through all the blocks and click on “search input” to open the workflow where it says “on change”.

STEP3 :
Delete all existing steps


STEP 4 :
Create thoses 2 variables (with the same properties)


STEP 5 :
Go back to the “on change” workflow and in the first step add a “change variable value” and reproduce this:

Add a “rest api request” and reproduce it IDENTICALLY:

THE URL : https://maps.googleapis.com/maps/api/place/autocomplete/json

TO GET YOUR API KEY FOLLOW THIS TUTORIAL

STEP 6 :
Go back to your input on the page and write something so that the input is not empty.
image

STEP 7 :
Then click on “test” and it should say “success”.

STEP 8 :
Add a “change variable value” and reproduce this (with the second variable you created earlier called “search result” :

STEP 9 :
Return to the page and click on the same block, then bind the list collection with the same variable as before.

Do the same for the text displaying the places

STEP 10 :
Now to make it so that when you click on an address the list closes follow this :

Click on the “on click” workflow already created

Remove everything that’s there


STEP 11 :
Change the variable value of the INPUT itself with the data representing the clicked location

Then change the variable value of the very first variable named “is writing” like this

FINAL STEP :
Finally, we’re going to make sure that when we click on a place, it closes the list automatically :

I hope this will be useful, so you can modify the ui as you wish and if you have any questions, let me know :slight_smile:
image

12 Likes

Oh wow! Thanks so much for taking the time to put this together @rayanenocode! Can’t tell you how much we appreciate it :hugs:

2 Likes

Hello! Thank you haha I saw that there was no clear and concise explanation and especially that the google doc has too much information scattered and it’s not easy to set up, I hope it can help :))

2 Likes

I’m sure it will!

1 Like

Thank you @rayanenocode !! I was able to create this in less than 10 minutes because of this! :+1:

1 Like

!!!

I forgot to mention, don’t make the api request on the front end if you publish it, anyone can have access to the api key. Just replace in the workflow “call api” by an xano request with the right get api,

and replace the input value here

In that way its secure :slight_smile:

2 Likes

Hi,

Any idea how to incorporate Address Autocomplete as below guide

Thank you

Thank you for this.

Following up on this. Thank you for the tutorial. This type of feature has been really complicated for me to grasp and this guide helped me get further than i’ve gotten in the past.

I’m having a few issues. I used a fetch collection instead of an inline Rest API request. When I hit delete on the search field (to get it back to blank), my collection starts throwing off errors for a missing param “query”. I tried some True/False splits but that doesnt seem to be correcting it and it also seems like it would create an endless loop which wouldn’t be good.

Are errors like this expected when removing text from the search and having the action fire off?




Hello, that’s why its not working, you need to do a call api directly not fetch a collection

Finally :sob:

Thank you for this tutorial

@maryna FYR

Haha no problem, dont forget to select the right result that you want to display and not the complete object