In this lesson, we're going to learn how we can display our users’ diary entries out on a map and allow them to click on a map marker in order to view the corresponding diary entry.

Now, it’s worth noting that later in the course, we're going to do more than just let our users tag their location. We're actually going to let them search for a location and add this searched location to their diary entry. But we're going to start simple here by focusing this feature around the user's current location.

So, I'm going to start here by adding an input to our form for adding the location for a diary entry. And I'm going to start just by duplicating — by hitting Command or Control + D on my keyboard — this top title input group.

Let's change this title to say “Address.” And this entire group, we'll actually call Group Address so it's really clear what's going on. I’ll just move it one step down in the form, and then update this input.

So, the input — this is going to be Input Address. I'll clear out the initial content, and then we're going to set this content format to a type that we haven't dealt with yet in Bubble — and that type is an Address.

We actually won’t make this required either.

I want to show you right away what happens when we try to add some value into this address field. So, let's say that I just type a part of some address like “New York.” Watch what happens when I click off of this input — see how it just became like a formatted address? We added the state and the country.

So what is actually happening there is that Bubble has this integration with Google — the same Google that provides Google Maps. What Google is doing is it's taking some part of an address and it's converting it into this geographic address data type that we can actually work with in Bubble.

Because what I can do is, if I duplicate this text element, I could point the data source for this text to that Input Address value. And then I can do a few different things:

So, if I type here again “New York,” you see that that section of the address is being pulled out.

Now, what you'll find is that if you try to test this with even just sometimes more than one address, it just doesn’t work. That’s because this integration that Bubble has with Google is only allowing us to make a certain number of these formatting requests in a limited period of time.

And that’s because we're developing here a test version of our app. All of these requests to format an address that Google is fulfilling — they all come with a cost. And Bubble at the moment is eating that cost on our behalf.

So what we have to do instead is set up our own integration between our app and Google. That way, anytime we're using any of Google's location services — a suite of products that let us work with addresses and locations — those requests will be billed to our Google account, not Bubble's.

There is a detailed article in the Bubble Manual for how this all works, and a video as well. I want you, if you're adding location services to your app, to watch this video and set up what we call an API key.

That sounds like a bit of a mouthful right now, but all it is is an ID for our application that we provide to Google whenever we ask it to do this formatting of an address. That allows Google to know that, “Hey, this request to format an address came from our application,” and therefore they can associate those requests with our account and bill our account.

The costs for these are really, really low, so I wouldn't worry about the cost right now.

Once you do this, you should find that you're able to add different addresses into this new address input and see that they're being formatted correctly.

What's more, we can actually save the value from this input onto our Diary Entry. So if we go and look at what happens when we hit the Save button — we're making changes to a diary entry — we could add another field here for saving the location.

So, I could create a new field here called Location or Address, and we could set this to be the basic type called a Geographic Address.

This is the same data type that we're working with within the context of that input, and that means that we can set this to be the output from that Input Address.

Now this means that if I add some city name and save this, you'll notice that in the database we have the location saved.

This is, remember, a Geographic Address data type, not just a text value.

That means on our Diary Entry Details, for example, if I duplicate this Group Date, this is going to become our Group Location. I could display, let’s say, the location for this diary entry.

So, I could go:
​Diary Entry Details → Diary Entry’s → Location.

Let’s change the canvas placeholder here as well, and change the icon to a map marker icon.

I could even add a workflow so that when this group is clicked, we go Navigation → Open an External Website, and add in here the diary entry’s location — linking to Google Maps or Apple Maps.

Here’s how this works: if I now click on that button, it will actually open the Google Maps app (if I have it installed) and take me to that location.

So, this is the basics of how this Geographic Address data type works.

In the next lesson, we're going to learn how we can actually find the location of the user's device and save that into that address field.

So, I’ll see you in the next lesson.