Introduction to Google Maps Integration
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 lot of 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. Now this of course is an expansion upon what you could do with just the search box and the address field and 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.
Accessing More Bubble Tutorials
If you want to see how I got up to this bit, you will need to go and check out the previous video but I'm going to jump right in here and show you 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 planetnocode.com so it's well worth becoming a member if you're learning Bubble.
Adding a Maps Element
Right, 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 a min width 100 percent. Just get our formatting back on track and then I'm going to add in a maps element. And add it into my row. Okay, right the repeating group is not going to be width 100% anymore. Just say width 50%. Right, Google Maps. Here we go, they're sharing the space. I'm going to add in a nice bit gap in there. Just like that, it doesn't look too bad. I think the map should probably be on the right. Maybe Airbnb is 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%.
Configuring the API Call
Okay, let's go back to the API call. So I've got the setup in my API connector here and I'm going to click reinitialize because we just need to check the data that comes back. So we get back address and we get back that, yeah, latitude and longitude. Okay, okay, let's give this a go. I'm just a little bit hesitant because the address field is not the whole... it's not the... you know, it's only the first line of the address, but I'm going to give it a go.
Setting Up Geographical Address
So first thing we do is change this into a geographical address and what Bubble is then doing behind the scenes is it's using its own link in with the... with some of Google Maps's own APIs and you'll need to add your own Google Maps API keys to your settings section in Bubble. When you launch app for this testing process, Bubble is allowing us to kind of piggyback on some of their own API keys.
Configuring Map Settings
But let's, yeah, let's just try this out, save and then I think we're actually going to get really weird results here because now the location is going to be a list and then the type of markers is going to be my places and the address field is address. Now I'm seeing that because when I initialize the call, I've set this as an address field. I wouldn't be seeing otherwise because otherwise it would just be treated as a text field. And then data source, I might as well just use my repeating group. This is the places. Yeah, let's try that out. Actually, I wonder if I can improve this. No, okay. I think we might get odd results here because how does it know which country is Baker Street? Anyway, let's try out. We'll go Pizza, London.
Dealing with API Limitations
Right, I don't normally cut out parts of videos because I think it's important to show the little bits that I do get frustrated by and then hopefully I can communicate in the video in my approach to debugging. But what I have here in what I was trying to demo only a few seconds ago as you're watching is the fact that I've used my small allocation of Google Maps API tools that are included within my Bubble app using the Google Maps embed here and using the address lookup. I mean, that's understandable. That's because Bubble doesn't want us, Bubble app creators, to wrap up a huge Google Cloud build for them. They just give you enough to test. Anyway, for me to put multiple points on the map, I needed to set up my own Google Maps API keys and add them into the settings tab in my Bubble app. I'm probably going to record a video on how to do that at some point, but it is really well documented and there are links in the settings tab of how to do that with explanations.
Testing the Results
But anyway, I've got back to this point here and I want to see basically if the address data that's sent through, even though that's only one line, whether it's going to work. So I'm going to give it one last refresh, get rid of that message and I'll say pizza in London. And run. Okay, yeah, we've got some very interesting results because it's for some reason... that's the amen. Okay, no, that's because for some reason the API has returned pizza pilgrims in Brooklyn. But if I have a look here, I am actually getting the results. Right, I'm going to just try and spend the moment to see if I can debug what that is. Let's search... Why would it say London? Okay, I'll try something else. I'll go back to fish and chips. Okay, here we go. Here's Brighton and here are some of the results.
Analyzing the Results
Okay, so some of them are not printing the location. Let's just have a look in there and see why. Is that because places address... okay, it's because Google doesn't actually provide that detail and it looks like for some of them, I do actually get a more full address. So maybe that's an issue with with server.dev. Anyway, let me know how you get on. But the point being is 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've got any tips or advice or things you found work really well, leave them in the comments below.