Multiple Map Markers On Google Maps Using Geographic Data

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.