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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.