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
Currently my database has a Country data type and the Country names as text fields.
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.
And the search box’s “Preferred Results” is set to be around the Parent group’s Geographic Address.
But I’m still getting such wide results in the search (unless Syria is within 50 meters of Australia :P)
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 save hours, & ship faster with an expert on-demand
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.
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
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
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 save hours, & ship faster with an expert on-demand
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
Josh @ Support Dept
Helping no-code founders get unstuck fast save hours, & ship faster with an expert on-demand
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 save hours, & ship faster with an expert on-demand
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 save hours, & ship faster with an expert on-demand
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 save hours, & ship faster with an expert on-demand
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 save hours, & ship faster with an expert on-demand
@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.
save hours, & ship faster with an expert 
on-demand
save hours, & ship faster with an expert 
on-demand
)
