Show List of Cities based on Country

Hey All,

I know a lot of posts have been made around searching addresses. I’ve spent a long time scouring the forums and am still having using both Bubble’s Geolocation and Google Maps API.

Not trying to achieve anything too complex.

I have users select a list of Countries which they want to conduct business. And based on each country, I’d like users to be able to select specific cities they want to do business within that Country selection.

I.e. Country=Australia - show users a list of Cities within Australia.

Database Step-up

  1. Currently my database has a Country data type and the Country names as text fields.
  2. Within Each Country I have a field set to be a Geographical Address that contains a list of Cities. I am only storing one/two City per country and using this to extract the Country from any given city address.

The hope was to restrict the search results based on the Country I am extracting from the City List. I.e. Sydney, Australia → Extract Country: Australia.

I have the Search Box in a group and that groups parent is set to be the Country which is being extracted.

image

And the search box’s “Preferred Results” is set to be around the Parent group’s Geographic Address.

image

But I’m still getting such wide results in the search (unless Syria is within 50 meters of Australia :P)

image

1 Like

Okay so I was able to finally restrict the search results to locations within that specific area.

I used an dropdown and set it to be the Users Countries selection. Then based my search location according to that country.

As I understand it though Bubble has no way of filtering the Search results themselves to only show cities, correct?

Does anyone have a work around ?

For anything address related I’d recommend using the Google Maps APIs directly as you have a lot of control over what is shown and what isn’t vs. through Bubble. You can either integrate with these using the API connector or there are a bunch of plugins on the plugin store that do this for you.

With Google maps they have a layered approach to maps, so you can limit to say the city level as well.

If you want to make your app a little more location aware, you can also use one of the IP address plugins that will give you country / city based on a users IP address. In some apps I just use this and record it in the db and never ask the user (if it’s not super critical). Or you can use this to pre-populate a result and let them change it if it’s wrong (i.e. they’re using a VPN)


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

Thanks Josh.

I have the Google Maps API setup but can’t seem to figure out how to take those results and make them appear in a dropdown list. Don’t need the actually map functionality.

Is Google Places better suited for that?

Ok so this is actually way easier than I thought :grinning_face_with_smiling_eyes:

Google-Places-API-Cities
All I have done is configure the Google Places API and then on the page itself put an input box and a repeating group.

The repeating group uses the API as a data source and feeds in whatever is in the input as a parameter, so of course, whenever you change what’s in the input box it’ll automatically trigger the API to fetch new results

API

Here is the GET request: https://maps.googleapis.com/maps/api/place/autocomplete/json?input=[input]&types=(cities)&key=[key]

You will need to ensure you have an API key from Google that has the relevant permissions. And if you want to alter this to show something other than cities then you can read this documentation. It’s really easy to modify this for loads of different use cases. Note: the URL shown in those boxes on the documentation is just one long URL broken into different lines. There’s no trickery :grinning:

Input Box

Repeating Group

Text Box in Repeating Group

Of course then you can set a workflow that when you click on the items within the repeating group you take that data and do whatever you want to do with it. Enjoy


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

4 Likes

@josh24 I can’t wait to try this!!!

Thank you. Will report back once I get it working.

Is the INPUT and KEY meant time be Input field I’m using in my Design?

You will feed your input box contents into that input parameter on the API. To initialize your API just put in a city name like Hong Kong or whatever.

They key is your Google Maps API key. If you don’t have one then you’ll need to get one from Google. This you would set to private and just leave in the API connector permanently. I’ve just cleared that out to take the screenshot for obvious reasons :grinning:


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

1 Like

Thanks @josh24 .

I have the Google Key setup (blurred for obvious reasons lol :slight_smile: )

image

But whenever I do a call to intialize I get the following with no predictions returned

The only option I have for my RG is the status field

image

To initialize you need to do a real call first so you can get the API response. Bubble then uses that API response to help you build out your workflows etc.

Currently, you have put ‘Input Seach City’ in the value field for the input parameter. It’s failing as Google is trying to find a city called ‘Input Search City’ and getting no results. Try and put an actual city name in here and try again.


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

1 Like

Brilliant @josh24 . No exaggeration. I stood up and applauded. You’re awesome.

I added an additional filter to search all cities based on the User’s Country.

1 Like

Happy to help :grinning:

Who needs a plugin when it’s that easy!


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

1 Like

Forget the plug-in - what they need is a @josh24 :grin:

2 Likes

You’re going to have to let me quote you on my website now! What a testimonial!


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

1 Like

The only other question I have is that the search results require very specific text strings.
For example -

if I search C in Canada I only get on result: Calgary. As opposed to all cities with the letter C.

image

Is there a way to increase the sensitivity of the search. I see in your GIF it pulls up pretty immediate results.

testimonial pending

1 Like

Google maps have a bunch of different levels, so you just need to find the right level for what you’re trying to do. Set it to high and you only get really large cities or set it low and you get neighborhoods.

i.e. At the moment, I’ve used the type=cities. This is a pretty high-level filter and is probably going to exclude a lot of smaller cities and towns.

So you might want to change this to region and then specify a sub-locality or something like that. Here’s more info on that


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

1 Like

The more high-level search the better.

If they type the letter W it should pull all Cities that have the letter W in the name.

But like you said - cities is high level. Shouldn’t it be returning all major cities? @josh24

In terms of getting the right level - I think it’s best to read into the Google Maps API docs a bit more.

On this page they give you a definition of what each of those levels equate to. I remember a page some time ago that allowed you to look at this dynamically with real address data but I can’t find it.

The city type on the Places API is the using the administrative_area_level_3 which indicates a third-order civil entity below the country level. This type indicates a minor civil division. Not all nations exhibit these administrative levels.

So this is only going to be major places. I suggest swapping it to locality and that’s going to get you suburb and if that’s too detailed then go up from there.

The challenge with this as well is that going from street address to country-level is slightly different for each country as well. Some countries have loads of different levels that group into other levels etc and others are a lot more flat. So in my experience it’s rarely perfect from country to country so you’ll need to optimise for where most of your users are.

In terms of the suggestions - it’s an autocomplete API so it’s just going to finish what you’ve put in vs. search for every city with that character in it.

i.e.

If you type in A you’re not going to get Calgary

You’d probably need to look at using the normal address search API for that sort of use case, but it’s more of a click a button and wait for a reply type experience which I don’t think is what you want right?


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

1 Like

It’s interesting though - I live in a really small inner suburb just on the edge of the CBD in Sydney, Australia. The population of my suburb is only ~5,000 people.

With the level set to city, I can find my suburb. I can also find Sydney as it is also a suburb in it’s own right (the CBD area is a suburb called Sydney). But Sydney is also a region and covers a large area of like 5 million people.

So this works for me perfectly in an Australian sense. But I don’t know enough about how that works elsewhere


Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

1 Like

Just as you mentioned - reading the Doc’s is exactly what I needed to do.

You’re right - I’d like to avoid the click button! So we’ll let autocomplete do its magic.

@josh24 is there anything I have to do with API’s when it comes to the live version?

On my development version - everything worked great. The moment I pushed live - I’m suddenly unable to pull results.

I’ve cross referenced all API keys in the development and live version. and all are the same. Dev version works fine - results don’t appear on the live version.