Google Places Autocomplete - Add more component data

Feature Request
#1

I’ve been working on an address form using Google Places Autocomplete, and would like to be able to dynamically fill in the address form. There are multiple reasons why I would like to break up the address into its components, like ZIP/Postal code reporting etc…

I have been looking into the base code of the component, and I can see where the current data in the component JS file lines up with what is shown in Wappler.

Is there any chance that we can add the address_components, either as an array/object, or its broken down parts?

image

#2

You may test this updated file, added some extra data from the search results to the component.

dmxGooglePlaces.zip (1.9 KB)

#3

Hi @patrick, can this updated file be used with v4.1.0 in ASP.NET project? I’m also looking at the detailed address information to auto populate various fields in the form. The current Google Places component doesn’t provide the complete address.

#4

The new fields will not be available within Wappler with this update, so you have to handcode the expressions for them. It doesn’t matter what kind of project you have, just replace the dmxGooglePlaces.js file with the one in the zip file.

New properties that are added are: attributions, isOpen, userRatingsTotal and components

The components data will look like:

components: {
  streetNumber: {
    long: "7",
    short: "7"
  },
  route: {
    long: "Sandpiper CLose",
    short: "Sandpiper Cl"
  },
  ...
}

Names like street_number are changed to streetNumber.

1 Like
#5

Thanks for that Patrick.

I had to make a couple of changes to the file to get it to work. The isOpen() function isn’t working, so I have commented that out, and a little spelling error in short: short_name was chort_name. Other than that, I’m able to see the data in dmx.app.data.content etc… So thanks for that.

I’ve attached the file I’ve updated for reference. You’ll see the changes in the comments made, including the error for isOpen() function.

dmxGooglePlaces.zip (2.3 KB)

#6

For the isOpen it probably needs an extra check to see if the opening_hours is actually set, since almost all result data is optional and is not always available

#7

That makes sense. I haven’t read too far into the documentation for the API (haven’t really needed to, Wappler made it easy :smiley:) so not sure what’s optional or not.

All I have to do now is to remember how to select a dropdown from innerText for the Country and State selectors I have and I’ll be sweet.

#8

It is now displaying the complete address, thanks @patrick

Thanks @mikkime23 for uploading the updated file. I now have to figure out how to access the various components within the array to auto populate address fields :slight_smile:

#9

Hey @guptast,

You can always look in dmx.app.data.content from the DevTools console, find the autocomplete input you have, and you’ll find the components array there.

image
image628×797 32.6 KB

Then in your input:

  • Dynamic Attributes => Value
  • Click the AppConnect Data Binding
  • Go to Code and add the data as usual. E.g. form_createAddress.inp_addressAutocomplete.components.route.long
#10

Hi @mikkime23, thanks for the tip to look in DevTools console and how to add the array in AC. I can see the complete components array now in the console, so I can just follow it and add the values I need.

Your help is greatly appreciated :slight_smile:

1 Like
#11

Awesome! No problems at all. DevTools is your biggest friend. :smiley: Props has to go to @patrick too.

@patrick, can I assume that this is already a feature to be released in a future version of Wappler? If so, I can mark this post other than Feature request.

Cheers

1 Like
#12

And just in case anyone has any problems with autofill popping up on the Autocomplete input, it’s a known issue with Chrome, as Chrome, almost beligerently, doesn’t honour the autocomplete=“off” attribute, even though the script for Autocomplete adds this property automatically (and we can’t stop it that I’ve found).

The workaround is shown below. This snippet is directly from Google Maps Javascript API documentation.

image
image848×128 7.49 KB

Moral of the story? Avoid the word “Address” like that creepy Uncle at a family gathering anywhere near the Autocomplete input. Although, using the word “address” in the placeholder doesn’t seem to matter.

1 Like
#13

We will release the update in one of the upcoming releases, we also have to make some changes into the Wappler part first so that you will be able to pick the new data.

Here the new file with the fixes. dmxGooglePlaces.zip (1.9 KB)

Google Places return null in query
#14

That’s fair enough. Thanks Patrick. :slight_smile:

#15

For anyone looking to reset your address form properly on an event, and you have your form inputs attached to the components, I have added the following JS to my project to reset all the DMX data.

// Reset Google Places Autocomplete Input

function gpReset(p) {

    // 'content.' added because I'm using content pages.
    let path = dmx.parse('content.' + p);
    for (const item in path) {
        if (item.startsWith('__') || item.startsWith('$')) {
            continue;
        }
        switch (typeof path[item]) {
            case 'object':
                path[item] = null;
                continue;
            case 'boolean':
                path[item] = false;
                continue;
            case 'string':
                path[item] = '';
                continue;
        }
    }
}

Just run a flow on your event (button click, modal close etc…) => Run Javascript
image

The argument should be the path to the Google Places Autocomplete. E.g.
address_createModal.form_createAddress.inp_residenceAutocomplete

Obviously I’m not sure if there is going to be a reset when the update is issued, but this is my workaround for now.