Multiple Map Markers On Google Maps Using Geographic Data
In this Bubble.io tutorial video we demonstrate how the Google Map element in Bubble can display multiple markers at once.
Unlock the power of Google Maps: Learn how to display multiple markers and store geographic data in Bubble!
Master geographic data handling: Discover how to create a search box that interacts seamlessly with Google Maps API!
Elevate your Bubble skills: Create dynamic maps that adapt to multiple locations and learn essential geographic address data management techniques!
Introduction to Multiple Map Markers
This video is picking up right from where my previous Google Maps video ended. So right now we have a search box set to a geographic field and I can search for a place and using the Google Maps API we get this list of suggestions and then my map centers on that location. So I'm now going to demonstrate how to put multiple points on your map and store geographic data in a format that will display nicely on a Google Map.
Setting Up the User Interface
I'm going to be grouping this into a row and adding a button in there so I can save data. So let's make this not fix width 100%. There we go. Put that at the end. Save button at the end. And let's center it and let's just add a nice gap so that it looks nice. There we go. And now I'm going to create a repeating group to go underneath. This is so that I can be showing you the map's data as text but then also displaying it on the map next to it.
Creating a New Data Type
Let's make this width 100, min height 300. Let's get this space in there. And to do this let's create a new data type called location. And location will have one field and that will be address. And I'm not going to store this as text because in order to pass geographic information onto a map I need to choose a geographic address. And this is what enables the interrelationship between your Bubble app and the Google Maps API to display this data correctly.
Configuring the Repeating Group
So then this is going to be displaying location. Do a search for all locations. And I'm just going to get it to print the current cell's location address in there. Brilliant. And then let's make a quick workflow that's going to save and I search from address in here and I pick one to save that as a location.
Creating a Workflow to Save Locations
So data, create new thing, location. Okay and just to double check I have this field here set as a geographic place so that way it is going to pass on geographic data. So new location, address equals search box. And so I don't want the place name because that would be a text value. I want the value because that's my geographic data. And then let's reset right on input so it will clear the text field.
Configuring the Map to Show Multiple Locations
Lastly, let's set up our map to show more than one value showing the list. So I don't want it to be referencing directly the search box. I'm going to want it to show a list of locations. Do a search for location and then it gives me the address field because it knows that the address field is a geographic address field. So it's the right type of data.
Testing the Map Functionality
And let's hit preview and see if this works. So let's go for London again, London UK ad. Okay, we've got one. Let's go somewhere else in the UK first of all to see how the map responds. Cambridge. So there you see that the map has now grown in order to get all the place markers in place. Let's go a little bit further afield, like Paris. And in that instance, it hasn't grown. Yeah, so that's something to watch out for is how your Google map responds.
Adjusting Map Settings
So you might need to tinker with some of the settings here, enabling you to set different zoom height distances, like how far out from the globe you're looking. Let's give it a refresh and just see if it includes all the markers. Okay, so it looks like it might be the new response engine. It might just be that it's a little bit buggy taking the new element. But you can see when the page loads knowing the items that are there, it incorporates all of them.
Testing with Far-Off Locations
So I wonder what happens if we go really far afield like Auckland in New Zealand. Okay, if I zoom out manually, I'm sure we'll see that there is a point on there. Yes. And then if I refresh it, yeah, there we go. So it looks like when the page loads, it zooms the map to an appropriate zoom in order to display all of your data. However, I would be aware and watch out for the fact that when you add data in, it doesn't necessarily zoom out to include that data.
Conclusion
But anyway, there is a demonstration of how to show multiple map markers, use geographic data as a data type and begin to create a list of places that are displayed on a map.
Master Bubble & Launch Your MVP
Embark on your Bubble.io journey with our Free Access, or accelerate your progress with the 90-Day Pass for just $99.
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
- Free Plan: Enjoy unlimited access to the Beginner Essentials course.
- 90-Day Pass: Unlock all 500+ videos and full AI functionality for 90 days. Afterward, you can subscribe at a great rate to keep building and learning.
Our AI No-Code Coach is your first stop. If you need deeper help, consider optional 1:1 coaching for personalized guidance. We also host occasional community events to share tips and celebrate wins together.
After your pass ends, you’re free to continue with a cost-effective subscription that includes ongoing AI No-Code Coach access and any future content updates.
Absolutely. If you don’t see real progress within 30 days of your 90-Day Pass, let us know, and we’ll issue a full refund—no questions asked.