Introduction to Using Places API with Google Maps in Bubble

In this Bubble tutorial video, I'm going to show you how we can use the Places API by Serper.dev to search Google Maps with a natural language search, get the results into our Bubble app and then plot them on a map. So in the previous video, I've got this file which would be, if I demonstrate, I can put 'pizza' in there and then I could say 'London' and click search, and I get a list of pizza places in London.

Why use Natural Language Search in Bubble?

Now this of course is an expansion upon what you could do with just the search box and the address field in Bubble alone because you actually have to know the name of the business or the address that you're searching for. This takes the power of Google Maps and clones it into your Bubble app by using that nice natural language search.

Getting Started with the Places API Tutorial

If you want to see how I got up to this point, you will need to go and check out the previous video. But I'm going to jump right in here and show how we can add in the maps element and plot these locations on a map. But before I do that, if you're here, you're watching Bubble tutorial videos, and if you want even more Bubble tutorial videos, you can find many of them exclusively on our website planetnoco.com. So, it's well worth becoming a member if you're learning Bubble.

Adding Google Maps Element to Bubble

Let's launch in and add a maps element into here. So, I'm going to just wrap this in a row group and say that it is min-width 100% just get our formatting back on track and then I'm going to add in a maps element and add it into my row.

Formatting the Google Maps Element

The repeating group is not going to be width 100% anymore. I think just say width 50%. Right, Google Maps, here we go, they're sharing the space. I'm gonna add a nice big gap in there just so that it doesn't look too bad and I think the map should probably be on the right, maybe Airbnb's trained us to do that. And because I'm a slight layout perfectionist, we'll change that and we'll add 12 to the top of that. Now, make this height 100%. So, let's go back to the API call. I've got it set up in my API connector here. I'm going to click reinitialize because we just need to check the data that comes back. We get back 'address' and we get back latitudes and longitude.

I'm just a little hesitant because the address field is not the whole address, you know, it's only the first line of the address but I'm going to give it a go. The first thing we do is change this into a geographical address. What Bubble is then doing behind the scenes is it's using its own link with Google Maps' own APIs, and you'll need to add your own Google Maps API keys to the settings section in Bubble when you launch the app. For this testing process, Bubble is allowing us to piggyback on some of their own API keys. But let's give this a try.

I'm going to save and then I think we're actually going to get some odd results here because now the location is going to be a list and the type of markers is going to be 'my places'. The address field is 'address' now. I'm seeing that because when I initialized the call, I've set this as an address field. I wouldn't be seeing it otherwise because it would just be treated as a text field. The data source, I might as well just use my repeating group - the places. Let's try that out. I wonder if I can improve this. I think we might get odd results here because, how does it know which country 'Baker Street' is. Anyway, let's try out. Let's search for 'pizza' in 'London'.

I don't normally cut out parts of videos because I think it's important to show the little bits I do get frustrated by. And then hopefully I can share my approach to debugging. But what I ran into a few seconds ago as you're watching is the fact that I've used my small allocation of Google Maps API calls that are included within my Bubble app, using the Google Maps embed here and using the address lookup. That's understandable, because Bubble doesn't want its app creators to rack up a huge Google Cloud bill for them, they just give you enough to test. So you'll need to add your own Google Maps API keys into the settings tab in your Bubble app. This is actually well documented and there are links in the settings tab that explain how to do that.

Anyway, I've got back to this point here and I want to see basically if the address data that is sent through, even though that's only one line, whether it's going to work. So I'm going to give it one more test. I'll get rid of that message and I'll say 'pizza' in 'London' and run. We've got some very interesting results because for some reason the API has returned 'Pizza Pilgrims' in Brooklyn. But if I have a look here, I am actually getting the correct results for London. I'm going to just try and spend the moment see if I could debug why that is. Let's try something else, I'll go back to 'fish and chips' in 'Brighton'. Here we go, here's Brighton and here are some of the results. Some of them are not printing the location; let's just have a look in there and see why. Is it because places address isn't provided by Google for some of them? From a brief inspection, it seems that for some of them I do actually get a more complete address, so maybe it's an issue with Serper.dev.

Let me know how you get on, but the key takeaway is that I've shown you how you can use the same custom state that you're getting for the places results and how we are now showing them as pins on the map. Yes, there's some sort out but if you got any tips or advice or things you found work really well, leave them in the comments.