Search and Scrape Google Maps data with Serper.dev

Introduction to Serper.dev API

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 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.

Tutorial Overview

So I'm going to demonstrate in this 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. 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 OpenAI 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 Setup

Let's launch into how I've got this set up and I'll give you a quick demo of what I've got. I've got 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.

Setting Up the API Connector

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. I've really been enjoying experimenting with this so I've added an API in for Serper.dev. I've got my API key in there and I've got the right head information including authorization and application JSON. If you're unsure about where to get that then they provide a fantastic playground here when I've just chosen places and it tells me the code I need to send in the API request.

API Call Structure

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. All of that translates into my API call here. 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 Google search results API from Serper.dev.

Query Parameters

Look, I've got my query here for Q and I've got an example in there and then GL I was trying to look for what that stands for but that's global location. 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 more localized search and how that enhances getting relevant details.

Page Design and Custom States

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. I've got two inputs: I've got search term and I've got city and I've got search. I've also got 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 really long titles.

Data Structure and Custom States

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 onto 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 call places and if I search for places here it gives me plug-in type so it's detected that there is a structuring of data coming from the plug-in that I've selected.

API Response and Repeating Group

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. 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.

Displaying Results

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 cell's search places place thumbnail and the title and the address.

Search Button Workflow

My search button is running my API connector plug-in action. If you're unsure how to do that when I add it as an action I get all of these other ones down here. If I search for SERPA 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 date and it's nicely going to my custom state and I can tell that it's accepted because the text is blue.

Final Demo and Conclusion

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. 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. I think this is incredibly powerful because you can either link in directly with the Google Places API but I quite like the simplicity of what SERPA has 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 users all of its stage it's gone Google Maps and it returns the relevant results actually I'm going to record a follow-up video and show these all on a map so like subscribe in order to not miss that.