Hi guys,
Is there a way to add a current user location (blue dot) as an icon on top of an existing map with markers?
right now, i m displayig the list of locations (hotels) as red pins from the data source. A classic way to display locations. However, I want to do it similar to google maps where you have a blue dot (current user location) and red pins (hotels, which I already have).
What solutions do we have for this? Please help. been trying to do it for a while
I know you’ve asked this question a couple of times.
I honestly have no idea how to do it in Bubble.
I did use the AI I always use and asked your question.
Maybe it will help?
Maybe you’ve tried using AI? I don’t know. I’m just trying to be helpful. AI has helped me a ton of times when it comes to Bubble.
If it helps or gives you some ideas, maybe you can get where you need to with your idea, and you can thank AI.
Anyway, brought to you by what I got back from AI:
Here are the solutions, broken down into steps:
Solution 1: Using Bubble’s Native Map Element
This is the most straightforward and recommended solution. You can achieve this without any additional plugins.
Step 1: Get the Current User’s Geographic Position
Bubble has a built-in dynamic data source called Current geographic position. This function uses the user’s browser geolocation API to determine their location.
Step 2: Add the Map Element and Configure Markers
Place the Map Element: Drag and drop a “Map” element onto your page.
Set the Marker Type: In the map element’s property editor, set the “Type of markers” to Geographic Address.
Set the Data Source for Markers: This is the crucial part. You need to combine your list of hotels with the current user’s location.
Set the “Data source” to be a search for your “Hotels” data type.
After your search, add the operator :plus item.
The “item” to add is the Current geographic position.
Step 3: Create a Custom State for the Blue Dot (Optional but Recommended)
The method above will show both your hotels and the user’s location, but the user’s location will likely appear with a generic red pin, just like the hotels. To get a blue dot, you can use a custom state and a slightly different approach.
Create a Custom State: On your map element or the page itself, create a new custom state. Name it something like map_locations and set the “State type” to Geographic Address and check the List box.
Create a Workflow:
Add a new workflow event, such as “When page is loaded” or a button click.
In the workflow, add an action: “Set state”.
Set the element to your map element and the custom state to map_locations.
Set the value to: Do a search for Hotels's Geographic Address:plus item Current geographic position.
Configure the Map:
Set the “Type of markers” on your map element to Geographic Address.
Set the “Data source” to the custom state you created: Your_Map_Element's map_locations.
Use Conditional Formatting for the Blue Dot:
With the map element selected, go to the “Conditional” tab.
You can set a condition to change the marker icon. However, since the Current geographic position is a single item, it’s hard to differentiate it from the list of hotels directly on the map.
This is where many users get stuck. The best way to solve this is to use a plugin that allows for different marker icons based on conditions or to use two separate map elements.
This method is a reliable way to get a different icon for the user’s location without a plugin.
Add Two Map Elements: Place two “Map” elements on top of each other on the page. Make sure they have the exact same size and position.
Configure Map 1 (Hotels):
This will be your base map. Set its “Data source” to Do a search for Hotels.
Set the “Marker icon” to your standard red pin.
Make sure it is configured to zoom and center on the list of markers.
Configure Map 2 (Current User):
This map will be for the blue dot. Set its “Data source” to Current geographic position.
Set the “Marker icon” to a custom blue dot image. You will need to upload an image of a blue dot to your app’s file manager.
Make this map transparent by going to its properties and setting the background to transparent.
Crucially, set the “Is draggable” property to “no” on this top map so the user can interact with the map underneath.
Group Them: Place both maps inside a group. This makes it easier to manage their position and ensures they stay aligned.
This two-map method works because Bubble will display both on the same canvas. You will get a map with your hotel pins from the bottom map, and a single, custom-colored pin for the user’s location from the top map.
Other Solutions (Plugins)
There are also third-party plugins available that offer more advanced map customization, including the ability to set different marker icons for different data types or conditions.
Google Maps Extended Plugin: This is a popular plugin that offers more control over map features, including custom marker icons.
BDK Mapbox Plugin: If you’re using Mapbox instead of Google Maps, this plugin provides the same functionality and more.
If the native Bubble solution is proving difficult, a plugin is often the fastest and most flexible way to achieve a specific visual effect like a blue dot.
In summary, the key is to either:
Combine your list of hotels and the Current geographic position into a single data source for the native map element.
Stack two map elements on top of each other, one for your hotels and one for the user’s location, each with its own icon.
thanks a lot seneca. My problem is I don’t have to search for hotels because I am on a search results page already and I have a list that i visualise as markers. In the data source of hte map right now, I have a repeating group of list of hotels which is the result of the search and it populates the map well.
I tried to add :plusitem but because that’s a list I can’t add the curent user location .
What map element are you using. If you can set the map marker dynamically that might help. The hotel data type should have a marker icon, then everytime you load the map add a new entry to the hotel type with the current user location. And make the marker icon for that to be the blue circle. Hacky but it should work.
Just make sure you delete that entry when done. I know Zeroqodes plugin supports custom markers but can’t remember if the other plugins do.
thanks a lot mate.
I’m using the native maps from bubble with the google api integration.
what did you mean by “add a new entry to the hotel type with the current user location.” ? entry in the database? or add entry in the map settings?how would i do that?
Don’t think this will work with the native map. But I mean create a new hotel entry with the location set to the current geographical position. So that it shows up on the map.
Try the map plugin by Renato. Might have the option to set marker icons from the db.
That could work. but can I add a blue dot icon for that hotel entry ( that is in fact teh current location) specifically?
Yes. But it’s plugin dependent. Look at zeroqodes docs
This topic was automatically closed after 70 days. New replies are no longer allowed.
