I've been playing with the Serper.dev API today and I initially thought, this is an amazing tool for anyone building a bubble app that requires an SEO spin on it because you can scrape Google search results. But then I noticed you can also scrape Google search places and this is seems like an incredibly powerful tool because you can effectively write just a something some sort of attraction or some term or some type of food and then a location and it's going to return the results as if you'd search for that in Google Maps and we know that Google Maps is incredibly powerful at understanding what a person searching is trying to get at.

Scrape Google Maps results

So I'm going to demonstrate in this Bubble tutorial how you can add the power of this places search powered by Google through the incredibly fast and amazing API by Serper.dev and how you can add that into your bubble application.

How to learn Bubble.io

But before I go there, if you're learning bubble, well you probably are because you're watching this tutorial, we've got hundreds of Bubble tutorial videos on our website. If you can't find it on YouTube there's a good chance that it's on our website so it's well worth heading over to planetnocode.com and searching whether that is open AI or other SEO videos, anything to do with Bubble, you can find it there or you can reach out to us in the chat.

Demo Serper.dev Places API with Google Maps

But let's launch into how I've got this set up and I'll give you a quick demo of what I've got. So I've got like a national dish in the UK and then I've got Brighton and I've clicked search and I'm displaying it in this repeating group. Let's go for pizza instead. And there you go, we have got a list of places that Google would rank for the term pizza in Brighton in Google Maps. So let me show you how I've built this. First of all I need to go into the API connector and go on to the bubble plugins API connector and I've really been enjoying experimenting with this. So I've added an API in for surfer.dev, I've got my API key in there and I've got the right header information including the authorization and application JSON and if you're unsure about where to get that then they provide a fantastic playground here. Well look, I've just chosen places and it tells me the code I need to send in the API request. So I've got my endpoint, I've got how to authenticate the call, I've got another header that's involved and I've got the structure of the data and all of that translates into my API call here. And if you want a little bit more detail on how I built this out in the API connector go and check out our video using the search search Google search results API from surfer.dev. And so look, I've got my query here for Q and I've got an example in there and then GL I'll try and look for what that stands for but that's global location. You know I'm wanting to search within the United Kingdom and obviously you could pick other countries for that and that again is all part of making use of Google's like more localized search and and how that enhances getting relevant details.

Creating a front-end search form

So I've got all that plugged in, I've initialized, I've set it as an action. Let's have a look at how I've designed my page. So I've got two inputs, I've got search term and I've got city and I've got search. I've also, as a button, I've also got a repeating group and I'm doing all of this with custom states and this can be a little bit tricky particularly because bubble tends to cut out, cut off really long titles but effectively what I'm doing is that since I've initialized the call in the API connector I now have bubble add in, almost make its own data types without me having to make my own places data type, it's made a places data type for my search places API call and what that means is that when I go on to my page and custom states are just a way of storing temporary data, nothing is written to the database, if you refresh the page it's all lost, but it means that I can add a custom state called places and if I search for places here it gives me plugin type, so it's detected that there is a structuring of data coming from the plugin that I've selected.

Using Custom states

Now I need to choose search places place because if I run the initialize call here we're actually wanting to go straight into this array, this list within the response, so search places place, so that's where I'm wanting because although bubble only shows us one here it's telling us that there is a list of data and in fact if I go to raw data you can see here that's the list of data being returned, the list of places, so I have that set as a custom state and then I've got my repeating group as date type of content, search places place, a singular item from the search places place list and then I'm connecting that up to my custom state on my page, places search, this is all getting a bit confusing but there's my page title and so my custom state here is what I'm referring to here, I'm gonna just remove that so we can get a few more results in and then within my repeating group I'm tapping into my current sales search places place thumbnail and the title and the address and then my search button is running my API connector plug-in action and so if you're unsure how to do that when I add it as an action I get all of these other ones down here so if I search for Serper then it's showing me the API endpoints that API calls that I've got and then I'm saving the results into my custom state now if you get stuck at this step it will most likely be because you've not said that the custom state is a list because we're putting list data in and so this is result step one is list data and it's nicely going into my custom state and I can tell that it's accepted because the text is blue.

Wrap up

Right I think that covers all of it so one last demo let's refresh the page and this time I'll say well I just like pizza so let's say pizza in London. Okay and there are all of my results and I get tons more data back I think including that lat long maybe a link through to their website but this is just the basic part of it so I think this is incredibly powerful because you could either link in directly with the Google Places API but I quite like the simplicity of what Serper's got set up here and it means that there's more of a natural language you're not having to search for pizza pilgrims in order to get information about that pizzeria you can just search for pizza London Google uses all of its data it's gone Google Maps and it returns the relevant results actually I'm gonna record a follow-up video and show these all on a map so like subscribe in order to not miss that