Displaying nearby restaurants based on users' inputs (addresses)

Hi Community,

I need help finalizing my app. I have an app where users can can search for restaurants based on a specific location. My challenge is to be able to display nearby restaurants based on the user’s input (address).

I have a database of restaurants and a search bar where users can input addresses. I cannot find a way to properly link the two.

Any help?

Thank you

In the repeating group below your search box input, you want to Do a search for your Restaurant data type. In the data search constraints, add one like so:

1b040c8b81b5df0afa976863de3fde84

Assuming location is the geographic location field on your Restaurant type, you can specify is within (number) miles/km of Search Box's value (or Current User's current_search_location).

During testing this out real quick, it seems more reliable to auto-bind the Search Box’s input value to a field on the current User (a geo location field called something like `current_search_location) since the value of the search box input wasn’t always being detected as a proper geographic location value.

You can setup a workflow on the search result page When SearchBox Location's value is changed → Element Actions → Repeating Group → Display List – or, forget this altogether and rely on the repeating list updating dynamically based on the auto-bind location value saved to the current user. As always, there’s many ways to accomplish the same goal in Bubble :upside_down_face:

1 Like

If you have the address of the restaurant in a field with type address, then you can do a “is x miles from” condition in your search.

Philip

Ok Perfect! Thanks for a quick response. I will try it and let you know.

Hi Philip,

It worked.! I just have another question on how I can let a user press a button(phone number button) and make a call outside of the app through the regular cell phone carrier.

PhoneNumber|257x147

To make a phone number link clickable, you’ll most likely want to place this HTML in a HTML element (essentially creating a button from scratch) on your page:

<a href="tel:DYNAMIC_TELEPHONE_NUMBER_WITH_AREA_CODE_NO_SPECIAL_CHARS(ie:8005551234)" class="telephone_btn">(800) 555-1234</a>

You then want to create your custom class style (.telephone_btn) with CSS in Settings → SEO/metatags → Advanced Settings → Script in the body. You can find many button CSS style generators by searching, this was the first Google result for me: https://www.bestcssbuttongenerator.com – example code:

<style>
.telephone_btn {
	background-color:#599bb3;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.telephone_btn:hover {
	background-color:#408c99;
}
.telephone_btn:active {
	position:relative;
	top:1px;
}
</style>

Where it says font-family:Arial; you should replace Arial with whatever font family your app uses. For instance, if your current Bubble button style uses the Roboto font, you can search for the Roboto font embed details in Google Fonts (Roboto - Google Fonts), click on “Select this font”, click open the embed details panel in the bottom right corner, scroll to “Specify in CSS” and grab that font-family code to replace the button generator’s code:

Or just:

<a href="tel:1-408-555-5555">1-408-555-5555</a>

As an example. This has nothing to do with bubble. This is just html / web stuff.

For txt version replace tel with sms, btw.

(See what I did there?)

Thank you! You guys are amazing! Peace

Hi Philip and all,

I need some help. I am creating an app where a user will search for a city name of city and be able to click on that city name, go to a next page and discover more about that city. However, when the user clicks back to go to the previous page, the search results is empty again. The user has to perform a new search again which is not efficient. How can I fix that when going back the user will still find the search results?

Thanks

There are a few ways to go about this. If you recall from my original post:

If following that plan, then you could have a conditional on the repeating group WHEN Current User's current_search_location is not empty, THEN data source = Do a search for... containing current_search_location. That way when people return to the search page, the list would default to whatever the latest value was stored on that user field.

Ok Philip.it seems doable. I will try once I get off from work and let you know. Thanks

Hi Keith/all other forum members…

Found this very usefull HTML code…

My phone numbers are coming out of the database…
is it possible to connect this call feature to call directly from a button?

Thanks a lot!

Nice explanation @philip . Thank you.
google map API configuration is needed to implement this?
also location saving to the database is empty when i am trying to save users current location. this is because of the google map API? i need to use google map API for location saving also?