Return Markers on Google Maps for Addresses that are within X miles of Y postcode

Hi guys!

I’m starting my first side project on bubble and I have made a lot of progress but I’m stuck now! I want to return Markers on Google Maps for “Addresses” that are within “X” miles of “Y” postcode.

Here’s my setup:

The “Addresses” are stored as a field inside of "Development.
X is an input box
Y is an input box

Like this:

I created a workflow on click and thought I had it:

UNTIL


In Pseudo-code, I though that this would be enough:
Search for Developments but constraint it so that Addresses are within Input Mile’s value miles of Input Your postcode’s value

But obviously, it isn’t.

Can someone please help me?

Thanks in advance!!

It’s because your input for “miles” is set up as a text input, and not a numerical input. Changing that should fix it.

You’ll also find that with the way it’s currently set up you won’t need a search button, because as soon as you change input “miles” value, the map will change its list.

If you’d prefer it to change once you press the search button, I would recommend storing the miles value either with the user, or as a custom state and having the map reference that instead.

Hope that helps!

2 Likes

Hey natedogg!

Thanks for the help. I fixed that issue and I do indeed get an error.

Without the search button, where do I create the workflow? On the “miles” input field?

Thanks again dude!

What is quite nice is to have a slider for distance. You can store that on the user and then default it in.

As Nate says, if you have entered postcode you can then change the distance and as long as the map is referencing the value it will change automatically without another workflow.

And as long as postcode input is an address it will also not need a worfkow. The map just looks at the address and the miles. You don’t need to “send” it.

Hey @natedogg ,

The above was abit of a dumb question and I figured it out. For others reading in, I took out the button. Then on the google maps widget, make it take a list of “developments” (addresses) and then under “Data Source”, I did the same Search as above.

Now, the functionality works as a user can type in postcode and radius and Google maps will show markers accordingly.

But I have a new problem with the UI/UX - Google maps does not zoom out or center to fit all of the markers. It just updates the Google maps iframe and if I increased the radius from say 1 mile to 10 miles, the markers would update and then I have to manually zoom out.

Is there a place to set zoom according to what markers are on display?

@NigelG, I’m working on the slider, will let you know progress!

1 Like

Yes. Although I am fairly sure it used to work !

You need to adjust the zoom of the map.

1 Like

Hi @NigelG / @natedogg , I’ve tried both of these solutions (automatic zooming + storing on user) and am still encountering the same issue @kfhwdd was encountering with the UI/UX not zooming out or centering to fit all markers. Any other suggestions?