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

17 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:

3 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:

3 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

Greetings amazing @rayanenocode ! Wow on the work, works flawlessly out of the box!! Thank you kindly!

I would like your opinion on the matter of security/speed on the autofill api call that gets us the “projections”.

How would you do it so that the Google API key is safe and the process is completed quickly ?
The simplest solution I can think of is: hosting in Vercel the edge function that does the call and trigger it through Supabase and an Insert somewhere to avoin exposures.
I feel like I am going from A to B through K ?

This is amazing, thank you.

This is awesome, thanks! I got this working already (thanks chatgpt) but was struggling with the autocomplete.. I was using a text input + repeater list but was a hassle to make sure it opened/closed properly, and using the Select input didn’t work as it doesn’t register the keystrokes when ‘searching’ so glad I found this!

I’ve personally made some additions:

  • I have an ‘onfocus’ workflow that sets the Writing ? variable to true, so when someone selected a location but wishes to change it, they just click the field once and the dropdown reopens straight away

  • I’ve added the ‘map’ on the field, and have another API call look up the Geo data of the selected location and drop a pin on the map:

Create a workflow on the item that will be clicked:

Then make a rest API request (once it works, change this to a backend call)
We use the place id of the chosen location, and send it to the API, under ‘fields’ it will return what we ask of it, in this case geometry (lat/lon) name and address

Then I put the returned lat/lon in an array to bind to my map, and the name I save in another variable because I want to display that elsewhere.

Then I bind the lat/lon to the map,. The first step is to bind these two, as this is what centers the map. (If you only bind the markers, the map won’t move to where the marker was dropped). If have a default location set, to make sure the map loads when nothing has been selected yet.

Lastly to make sure the markers drop. (bind the array, then bind the lat/long separately below it

Hope this helps someone!!

I’m personally struggling to take the users location with a button. It asks the browser for permission to get the location but then times out.. If anyone has a solution for that, please reply.

Also, it would be very very very nice if we can get the option to click and drag the marker (and get the lat/lon returned) !!! @Joyce I think anyone making a web app that requires a precise location will be dying for that feature :slight_smile:

Thanks!