Using Google Places Autocomplete

[Teodor]

About Google Places Autocomplete

The Place Autocomplete service is a web service that is used to provide autocomplete functionality for text-based geographic searches, by returning places such as businesses, addresses and points of interest as a user types.

NOTE: Make sure to check the Google Places Pricing before start using this service, as it is not free!

Using Places Autocomplete in a form

One of the most popular use cases is to add the Google Places Autocomplete field in a form, where the users enter their address. Here’s an example checkout form we added on our page:

Adding Places Autocomplete on the page

There are two ways of adding the Places Autocomplete on your pages. One way is to use the add new component button and select Google Places Autocomplete from the Forms category:

The other way is to convert an existing text input into a Places Autocomplete.
We will use this way as we’ve already built our form. Select your input, then click the Make Google Places Autocomplete button:

Setting up Places Autocomplete options

You will see its properties in the Properties Panel.
First, let’s start with pastng the API Key. You need to create an API Key and enable the Places API and Maps Javascript API in the Google Cloud Platform

Paste your API Key when you are done:

We won’t show the address on Google Maps on our page, so we leave the Map dropdown empty:

Then select a country, where you want to search the addresses / places:

And select the place type:

We want to use the autocomplete for addresses, so we select Address:

Save your page and you are done!

You can see the results in your browser:

[Heather_Mann]

I just wanted to drop a note here that if you want to search all place types leave the place type blank.

Also, @George - the field for Place Types allows multiple selections but only works when one thing is selected.

[Matthew_Payton]

Hi there,

Is there a way to get the Postcode and split out into other text fields using wappler easily?

[Heather_Mann]

Did you ever figure out how to get the post code?

[mikkime23]

@Teodor, is there any way to access address_components from the callback from below.
While I know the input has properties attached to it, there’s really only the full address. Ideally, I would like to be able to dynamically fill in the details of my form.

[jamesmazzu]

How do you get the full result set that is returned from Google which has all the address components individually identified, rather than just the concatenated text entered into the entry field?

[mikkime23]

Hey James,

You’ll need to access the object through the dmx global variable. For example:
dmx.app.data.content.<<your path to input>>

Best to open your DevTools console and find the actual path from there, then you can open your input and see the data object there.

I’ll send a screenshot of my DevTools when I get back on my computer. Currently replying on my phone.

[mikkime23]

Here is the path from DevTools:

All of your information for the address will be in components. I don’t have my GooglePlaces API working at the moment, so it won’t populate.

Here is the call from Wappler:

It seems that Wappler has updated their component since the last time I used this input, however, you can see the path below.

[jamesmazzu]

besides the problem of accessing the full google components result from within a server action, it looks like the autocomplete is not working properly for multiple search types, when you enter two types such as:

the generated code is:

… which is not accepted by google therefore provides no results. I’ve tried many variations of formatting this in the code with no luck.

Is this a known bug in the Wappler control?

[PaulBS]

Using this and it works well but is there a way to “force” the user to pick from the list.

I am retrieving the lat and lon when an address is selected but I have found that if the user enters an address then clicks elsewhere on the page (and not the matching address in the autocomplete drop-down) then the lat and lon are not returned (makes sense) but what they typed is still left in the field.

In the video below I change the address and click away from the field and no lat lon are returned.
I then type a new address and click on the suggested address and lot, lon are returned.
Then if I change the address and click off the field the lat lon don’t change.
(excuse the rubbish layout, lots of testing going on with this page):

CleanShot 2022-05-19 at 14.47.22

I know this is because without clicking on an address the lat lon are not supplied by the Google Places autocomplete but I am wondering if there is a way to stop users clicking off the field or by not changing the field content if they don’t select an address from the list (perhaps display a message?).

How can I identify if a suggested address is NOT selected? Is that possible?