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 centres on that location.
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 Google Map.
I'm going to be grouping this into a row and adding a button in there so I can save data. Let's make this not fixed with 100%. There we go. Put that at the end, the save button at the end and centre it. And let's just add a nice gap so that looks nice.
Repeating Group
Here 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 Maps data as text, but then also displaying it on the map next to it. So let's make this width height 300, get this space in there.
Geographic field type
And to do this, let's create a new data type called Location. 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. This is what enables the interrelationship between your bubble app and the Maps API to display this data correctly.
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 cells location address in there. Brilliant.
Add Map Pins with a Workflow
Then let's make a quick workflow that's going to save when I search for an address in here and I pick one to save that as a location. So data create new thing location. 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. 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 our input so it will clear the text field.
Map Element Data Source
Lastly, let's set up a map to show more than one value showing a list. We 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. That's the right type of data. And let's hit preview and see if this works.
Testing & Limitations
So let's go for London again. London, UK okay, we got one. Let's go somewhere else in the UK. First of all, to see how the map responds. Cambridge.
Okay, so 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.
That's something to watch out for, is how your Google map responds. You might need to tinker with some of the settings here, enabling you to set different zoom heights, 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 that you can see when the page loads, knowing the items that are there, it incorporates all of them. 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 that. 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.
But anyway, there is a demonstration of how to show multiple map markers, used geographic data as a data type, and begin to create a list of places that are displayed on a map.
