Forum Academy Marketplace Showcase Pricing Features

How to get map location markers to appear when a radio button is selected

Hi,

Im just getting started with Bubble, and despite reading the knowledge base I still find how it very hard to understand how data and workflow, work…

I have set up a list of radio buttons representing map locations ie. Store #1

I have inserted a map.

How do I link it all up so if someone selects one (or more) of the radio buttons, the location shows up on the map, as a marker?

I cannot work out whether it is done in the design view/edit radio button/conditions…or do I go to the workflow and create something? If it is workflow, is there a step by step helper? The terms and options are confusing to me.

Thanks

Hey @Christo :slight_smile: If you already have your Stores created, you can definitely display each one on a map depending upon which radio button is currently selected. Here is a forum example with four example Stores (each with a different address):

Editor:

Preview:

You probably have this part already, but just incase - I created a new data type called Store with two fields: Name (type: text, list: no) and Address (type: geographic address, list: no)

Then I created four example Stores, which look like this in the app data tab:

After the Stores are created and in the app’s database, I then set up the radio buttons and the map. The radio buttons are going to be Dynamic Choices (since we would like the radio button choices to be any Store created in the app). The type of content is Store (what we’re displaying), and the data source is Do A Search for Stores (this is just telling Bubble to search for all of the Stores in the database).

This part is totally up to you, but in this example I set the caption next to each radio button to be" [Name of Store], [Address of Store]"; this is selected using the expressions “Current Option’s Name, Current Option’s Address”. Default Value is optional, but I set it here which means that the first Store found in the search should be selected when the page is loaded (This is: SearchForStores:firstitem").

Last but not least, in order to have the map display the selected Radio Button’s address, the map settings are:

Alternatively, I created another map element below which displays all of the Stores at the same time (if you decided to display all Stores/not use radio buttons):

And that should work as expected! If any of this was confusing or if you need any help setting this up in your app please feel free to let me know/share a link to your app’s editor. :slight_smile:

Hi Faye. Thank you so much for the detailed instruction. I succeeded in creating a database which is fantastic, however I cannot seem to re-create the selection in the radio button editor or map editor. Specifically the Default Value in Radio button editor “Search for Stores:first item”…cannot work out how to get mine to say the same. Any chance of a video showing what selections you choose? Big ask I know. I cant work out what connects the radio buttons to the map.

1 Like

OK, I changed my database labels to exactly what you labelled them, and it worked!! I dont understand why, but it did. I will now attempt a few enhancements, like being able to select multiple radio buttons at the same time…thank you!

1 Like

Awesome! Glad you got it working @Christo :slight_smile: It takes a little while to become familiar with setting up new data types and fields, but it’ll definitely become easier as times goes on!

I don’t think you can select more than one radio button at the same time, but if you search the forum for multiselect (using checkboxes), that should give you a similar result where ‘checked’ stores’ markers are displayed in the map element.