Display List of Cities

This may be a stupdi question, but I don’t know how to display a list of cities once a user choose a nation.

Does anyone know how we could do this?

The idea is, I want to allow my users to choose a city that they could ship too (this is an ecommerce site)

Honestly, I think it would be best to have them select a country and then just enter their address in a multi-line text box. That will include their city, postal code, and street address. It would take way too much space to list every city on the planet for them to select from a dropdown and the functionality would be insanely slow.

That being said, there may be API’s through Google Maps or something similar that provide clickable and usable selections for cities as they type something in. For example:

User typing: Chic…
Suggestion pops up below the text box: Chicago, USA
Chihuahua, MEX

Just a thought. Let me know if I didn’t understand your question correctly. Best of luck.

1 Like

Why do that? Have them type their shipping address in an input tied to a Geographic Location data type. Much easier.

If u wanna be fancy, put a map below that input showing the address they entered so they can see if Google got it right. Example:

^^^ yep, that’s me! Elements on the page:

We the Save Address button is clicked, it does this:

You could do this with autobinding as well and save the step of having to click a button, but you may or may not like how that works. Try it both ways.

2 Likes

Yeah, I think this is probably the best way to go about it.

Yes, it is! You will note that the value that you get back in Bubble is very well specified (it will have EVERYTHING about the address, including country). Very cool feature, that.

1 Like

Bubble in general is really cool. I just found it a couple days ago and it’s insanely powerful. I’m amazed that I hadn’t heard of it before, it’s extremely underrated. There’s a learning curve, but it’s quite small, especially if you have experience in development outside of Bubble.

3 Likes

Hi,

Sorry to reopen this topic but I’m currently trying to set this up and when I input an info nothing shows up.

Is it still working or is there some issue with the map?

Thanks

Edit: Nvm I see it’s an API thing

Geocoding Service: This API project is not authorized to use this API. For more information on authentication and Google Maps JavaScript API services check https://developers.google.com/maps/documentation/javascript/get-api-key