[New Plugin] Address input with country option

[alex.hoyau]

Greetings my fellow nocoders

I just did this plugin for a project with a client in France. The client needed an address input field, with addresses only in France of course.

Links:

Demo: https://address-input-official-demo.bubbleapps.io/
Editor demo: https://bubble.io/page?id=address-input-official-demo
Market page: Not released yet, waiting for feedback

The Address Input Element has these properties which accept dynamic values:

• Placeholder
• Default value
• Country code (all country codes supported by google api)

The element has a value state and I added the Google geocode API key as a plugin parameter

Also I am thinking of a small monthly price, like $5 for example…

What do you think ? Constructive feedback and questions very welcome !

Thank you

[alex.hoyau]

Hello
The address input plugin is live \o/
I am looking forward to hearing from the users to add features and make it even better

[fyanko]

What we are hoping to do is when user types in the address and it’s looked up by Google for us to be able to fill in the other address boxes in checkout using it. For this to work we’d need an onchange event to be added I think.

[alex.hoyau]

Hi @fyanko
Let me think about it and come back to you after my vacation
I am sure I can do something about it

[alex.hoyau]

Hello
Yes it is
Does your key work for normal bubble address geocoding?

[alex.hoyau]

@yusuken1.mac I received your email, I’ll answer there thx

[arthuro]

Hi Alex, would it be possible to add a state about whether or not the user has chosen a valid address? I need to be able to check this to validate my form. Many thanks.

[alex.hoyau]

Hi arthuro
Good idea thx
It will take me a few days

[alex.hoyau]

Hi @all

The version 1.1.0 is live ! I have added more fields and events to the plugin, and updated the docs and the demo

Here are the states (values) you can use

• Selected address: address of the last selected place in the proposed list
• Selected name: name of the last selected place in the proposed list
• Address: address as typed in the text field or selected in the proposed list - may be valid or not
• Name: name of the place as typed in the text field or selected in the proposed list - may be valid or not
• Is valid address: True if the last action was to select a place in the proposed list => @arthuro

Events for your workflows:

• select an address: fired when the user selects a valid address
• type an address: fired as soon as the user changes text in the input field

Any feedback welcome!

Also I would appreciate more reviews because it has only 1 (very bad) review

Have a great no coding day !

[alex.hoyau]

Also after taking time to add features and cleanup the code, I raised the price from $5 to $8 so that after bubble commission it leaves me with $6 which is more sustainable for me to keep working on it and spend time supporting users

It would be sustainable if I had 50 more users, so please help me achieve that and leave a review

[alex.hoyau]

Hello dear users, I had a comment reporting this:

I often get a message on the dropdown stating “This page can’t load Google Maps correctly.”

Has anyone experienced this?

[alex.hoyau]

I think I know what happened, some users have been using my API key from the demo and the quota was making it fail. I fixed it by adding more quota

Please use your own API key, I’ll add this to the docs

[alex.hoyau]

@arthuro did you have a look at the features I added? Is this what you asked for?
Please remember to leave a nice review, this plugin suffers from missleading reviews
Thx !

[alex.hoyau]

is there a way to not allow them to enter anything except the value returned by Google?

Actually there are several options

use events

You can do as I did in the demo to show / hide the “green tick”. Here is how: create a workflow which enables the submit button when an address is selected from the list. In the demo, the event is “AddressInput select an address”. Also create a workflow to disable the submit button when the user writes an address instead of selecting it in the list. In the demo this event is “AddressInput type an address”.

Use states

You can use the AddressInput states in your workflows, to test if the user selected an address in the list (the AddressInput’s state “Selected address” is set) or typed to change the selected address (Selected address is empty)

[alex.hoyau]

I just added a feature (thx for the request), it will be live in a few days

You will be able to choose a place type to allow:

• geocode
• address
• establishment
• locality
• sublocality
• postal_code
• country
• administrative_area_level_1
• administrative_area_level_2
• administrative_area_level_3
• administrative_area_level_4
• administrative_area_level_5
• administrative_area_level_6
• administrative_area_level_7
• archipelago
• colloquial_area
• continent
• country
• establishment
• finance
• floor
• food
• general_contractor
• geocode
• health
• intersection
• landmark
• locality
• natural_feature
• neighborhood
• place_of_worship
• plus_code
• point_of_interest
• political
• post_box
• postal_code
• postal_code_prefix
• postal_code_suffix
• postal_town
• premise
• room
• route
• street_address
• street_number
• sublocality
• sublocality_level_1
• sublocality_level_2
• sublocality_level_3
• sublocality_level_4
• sublocality_level_5
• subpremise
• town_square
• accounting
• airport
• amusement_park
• aquarium
• art_gallery
• atm
• bakery
• bank
• bar
• beauty_salon
• bicycle_store
• book_store
• bowling_alley
• bus_station
• cafe
• campground
• car_dealer
• car_rental
• car_repair
• car_wash
• casino
• cemetery
• church
• city_hall
• clothing_store
• convenience_store
• courthouse
• dentist
• department_store
• doctor
• drugstore
• electrician
• electronics_store
• embassy
• fire_station
• florist
• funeral_home
• furniture_store
• gas_station
• gym
• hair_care
• hardware_store
• hindu_temple
• home_goods_store
• hospital
• insurance_agency
• jewelry_store
• laundry
• lawyer
• library
• light_rail_station
• liquor_store
• local_government_office
• locksmith
• lodging
• meal_delivery
• meal_takeaway
• mosque
• movie_rental
• movie_theater
• moving_company
• museum
• night_club
• painter
• park
• parking
• pet_store
• pharmacy
• physiotherapist
• plumber
• police
• post_office
• primary_school
• real_estate_agency
• restaurant
• roofing_contractor
• rv_park
• school
• secondary_school
• shoe_store
• shopping_mall
• spa
• stadium
• storage
• store
• subway_station
• supermarket
• synagogue
• taxi_stand
• tourist_attraction
• train_station
• transit_station
• travel_agency
• university
• veterinary_care
• zoo

The documetation explaining each type is here

Place Types  |  Maps JavaScript API  |  Google Developers

[alex.hoyau]

here is the plugin page on the market place

Address Input Plugin for Bubble, by Alex Hoyau

[ken6]

Alex, Thanks for creating this plugin! Couple of questions:

When a user is typing their address, is there a way to not allow them to enter anything except the value returned by Google? I want them to only choose what is in the list.

ALSO, is there a way to allow them to view/choose only street addresses, not places or anything else?

Thanks again for the plugin.

[alex.hoyau]

@ken6 thank you for your questions

When a user is typing their address, is there a way to not allow them to enter anything except the value returned by Google? I want them to only choose what is in the list.

I actually answered it here, just after I received your email:

[New Plugin] Address input with country option

is there a way to not allow them to enter anything except the value returned by Google? Actually there are several options use events You can do as I did in the demo to show / hide the “green tick”. Here is how: create a workflow which enables the submit button when an address is selected from the list. In the demo, the event is “AddressInput select an address”. Also create a workflow to disable the submit button when the user writes an address instead of selecting it in the list. In the de…

ALSO, is there a way to allow them to view/choose only street addresses, not places or anything else?

I added this feature for you, would you tell me if it solves your use case?

[New Plugin] Address input with country option

I just added a feature (thx for the request), it will be live in a few days You will be able to choose a place type to allow: geocode address establishment locality sublocality postal_code country administrative_area_level_1 administrative_area_level_2 administrative_area_level_3 administrative_area_level_4 administrative_area_level_5 administrative_area_level_6 administrative_area_level_7 archipelago colloquial_area continent country establishment finance floor food general_contractor geocod…

[alex.hoyau]

@ken6 all good?

[tedsauerland]

How can I add the API key to the plugin? I am having trouble finding it.

A screenshot/image would be helpful if possible.