BETA Unlocked: Address Input!

Your users can now search for an address and enter it in the Address Input element!

They will receive suggestions that come directly from Google Maps Autocomplete as they type; additionally, you’ll have the ability to narrow down these suggestions to a specific country.

This feature is bound to provide a whole new experience for your users! Check out the example below.

To access the beta, click on the link below.

Address Input .
Test it out and leave your feedback and questions in the comments section below. @eyalc and the Wix Editor team look forward to your responses!

12 Likes

Omg, omg omg. I Have been waiting MONTHS for this haha!

4 Likes

great job!

1 Like

Hey @eyalc ,

Thanks for activating this beta, i have been waiting months JUST for this component. The first things i have noticed is that i can’t connect the Address Input to any database fields through Data Binding (yet anyway).

When we have the ability to hook it up to the database, i would love to ask if we can save each individual part of the address to a different field. For example, Postal Code, Street Number, Street Name, Latitude, Longlitude etc.

1 Like

@roberthamilton Eyal is in Tel Aviv, so he will respond once he’s in! But do write any comments, questions, here.

@stevenjose Sure bro :slight_smile:

1 Like

@stevenjose Thanks for the post! I have been waiting so long for this feature. I have a few questions:

  1. When attempting to use the address input, there is a message that states “You haven’t connected Google Maps. Your users cannot use this feature until you add a Google Maps API key”… can you give us further instruction on this?

  2. Will this be able to connect to our database fields? When?

  3. Will this be able to connect to a google map element?

  4. Are you planning to integrate multiple address inputs to a single google map?

  5. Will we be able to filter address inputs via the dataset?

Apologies for all the questions. This is VERY exciting!

1 Like

Hey!

Thank you for this.

Currently I can see the places appear on the dropdown but I cannot click on any place and neither use arrow keys + the enter key to select a place.

Its still in Beta so I’m guessing the above is still under construction.

Will we be able to work with the Place ID (Example: ChIJE8P_pATXwokRCZLShQ7K7G8) ? Such as saving the Place ID in the database?

Hey Robert,

Happy to see your excitement over this component! Must admit I share it :slight_smile:
It’s been an ongoing effort for a while and it feels good to be reaching the final stages before delivery.

We are looking into a few options when it comes to connecting the Address Input through Data Binding. One of them is adding a new field type, dedicated for addresses. I will update on this as soon as we make enough progress to release it to Beta users. I don’t expect this to take long, but can’t make any promises.

May I ask about your use case and why you would like to store the different parts of the address in separate fields?

Thanks!

2 Likes

Hey Eric,

Always glad to hear that our efforts bring value to eagerly awaiting users :slight_smile:
We are working on improving so that delivery of similar features doesn’t take us so long in the future.

  1. Sure, instructions on connecting the Address Input element to Google Maps API can be found by:
  • opening the “Connect Google Maps” panel
  • clicking the ‘?’ icon
  • clicking the link provided in it (where the text reads “Click here to learn how to get a Google Maps API key”).

For convenience, I am pasting the instruction here:

To allow users to enter and search for addresses in Address Input elements, you need to connect the elements to Google Maps using an API key. 

To register for a Google Maps API key, go to the Google Cloud Platform site and follow instructions.
Here are some pointers to help you with the process:

You will need a Google account to register for a Google Maps API key. If you don't have an account, you can create one here (for free). Make sure to select the Maps, Places, and GeocodingAPIs. When prompted to select or create a project, create a new project and name the project whatever you like.As part of the registration process, you will be asked to create a Google billing account associated with a valid credit card. Google states that your account will only be charged if you exceed free courtesy API usage limits. Note that according to Google, most websites will not exceed this amount. You can also set a cap on API requests to ensure you won't be charged. Click here to view usage limits and pricing plans.When you receive your API key, copy it and store it in a safe place. Your API key is for your use only, do not share it with anyone.

Now you're ready to connect your Address Input elements to Google Maps using your API key.
  1. Yes, we are looking into a few options when it comes to connecting the Address Input through Data Binding. One of them is adding a new field type, dedicated for addresses. I will update on this as soon as we make enough progress to release it to Beta users. I don’t expect this to take long, but can’t make any promises.

  2. I am tempted to say yes, but may I hear out your use case first just to be sure? :slight_smile:

  3. Not sure I understand. Do you mean - can you use a single Google Maps API key for multiple Address Input elements?

  4. Again, not sure I fully understand. Is your question whether you’ll be able to read the name of the country (that is used to filter results) from a dataset?

Feel free to ask as many questions as you like :slight_smile:
And of course, feedback of any kind is appreciated.

Thanks!
Eyal

@eyalc that’s great. Currently it is pretty pointless without the ability to store the address in the DB - so we do need this quick.

In regards to storing different parts of the address, let’s say i wanted to create an event listings website, i can then create a frontend user filter to search for event in a specific town…because this event DB item has the town name. I guess it isn’t priority - but would be good.

Happy to chat on email?

1 Like

@eyalc Thank you so much for the information. This is extremely helpful.

To further elaborate on question 3… so for example, assuming we can store the address input into our database, will we be able to connect the address input to the map app on a dynamic page?

To further elaborate on question 4… assuming we can store the address inputs into our database, will we be able to utilize the map app to display multiple addresses on a single map. Like shown below. This can be extremely useful for real estate sites that leverage Corvid.

To further elaborate on question 5… assuming we can store address inputs into our database, will the “new” address field type bind to our dataset filters?

The google integration doesn’t seem to work. Or maybe the dropdown just isn’t showing?

@Robert Hamilton Yes, we realise that without connection to data the Address Input is mostly useful as a controller (e.g. let a visitor enter an address and then present a list of chain store offices sorted by distance from this address) and not so much as a form element (let the visitor fill in and submit an address together with other pieces of information).
You can submit an address a visitor has entered (or parts of it, such as lat/long) using the Corvid API of the Address Input until we provide a way to do so from the Editor.

Thanks for sharing your use case! :slight_smile:

It seems to me that you want an Address field type in the data collection to hold the name of the town of each event (an address does not have to be more specific than a town name).
Alternatively, you could use a Text field for it, but then you are in risk of the town names being spelt differently, so a canonical Address might be safer. Depending on how the town name makes it into the data collection, Text may or may not be safe enough.

When you filter the events, you need an input that allows the visitor to choose a city from a specific list of options.
Would you like the visitor to use an Address Input in this case? Perhaps a Dropdown would be more suitable?

Happy to chat by email :slight_smile:
Will send you a message with it.

@_eric It seems to me that the features you’re asking for in questions 3 & 4 have to do with the Google Maps element rather than the Address Input, right?
You want to present the addresses on a map regardless of whether an address makes it into a Data Collection through an Address Input or in any other way (Corvid, manual submissions etc.).

Whereas I cannot make any promises I can tell you that we are well aware of the need for both multiple locations and data binding (for a single or multiple locations) to a Google Maps element.
I need to sync with another team on this first, but I might have some more information to share a little later.

As for applying a filter to an Address field type (if this will indeed be the solution we eventually choose), I will pass this request on to the Wix Data team.
Sounds like a useful feature, albeit not a trivial one. What checks would you like to perform on an address: whether it is within a given city/region/country?

1 Like

Thanks for letting us know! I will look into this tomorrow with the relevant developer.

As for the Place ID, honestly we did not plan to have it as part of the scope of the initial release.
I’d be interested to learn more about your specific use case for it. Care to share?

Thanks!

1 Like

Thanks for letting us know! I will look into this tomorrow with the relevant developer.

@eyalc

For example: I develop job boards in which the Employers need to be able to select City, State & Country as the location of the job when posting a new job via their Admin CMS.

On the Frontend the users need to be able to filter by the same City, State & Country.

The reason I think I cannot use the direct text value is because Miami can be both ’ Miami, FL, USA ’ & ’ Miami, Florida, USA ’ in the Address Dropdown options and if the Employer selects ‘Miami, FL , USA’ as the job location but on the Frontend the user tries to filter by ‘Miami, Florida , USA’ he/she is not going to see the Employer’s job even though it is in Miami.


I don’t know how the Address Input Element works currently so that’s why I asked for the Place ID because both these locations share the same Place ID which can be used for filtering purposes.

Currently when using the Google API along with Repeater and Input Element: when you select the value ‘Miami, Florida , USA’ or ‘Miami, FL , USA’ it will just come to ’ Miami, FL, USA ’ which keeps the text value constant which is good. If the Address Input element can also behave this way then it will be perfect else the Place ID will be useful.

@eyalc where do i access the said ‘Corvid API’ of the ‘Address Input’?

@roberthamilton Oh yes, sorry. For a moment I forgot that we don’t publish the API documentation of a feature before it is available to all users.

But basically the Address Input API has much in common with other text inputs.
Namely, it has a value property, and this property holds an object with all the different parts of the address (see example below).

Bare in mind that while this product is in Beta the API may change, in which case I will post the changes here.

HTH

console.log($w('#AddressInput1').value);

// Output:
{
  formatted: "10 Downing St, Westminster, London SW1A 2AB, UK"
  location: {
    latitude: 51.5033635
    longitude: -0.12762480000003507
  }
  streetAddress: {
    name: "Downing St"
    number: "10" 
  }
  subdivision: "England"
  city: "London"
  country: "GB"
  postalCode: "SW1A 2AB"
}
1 Like