I have DB links about Google Maps, I am trying to find a text element from the result of my HTTP request, I would like to extract the website and the code plus (the last code, just below the number)
I tried HTML extract but didn’t find the good selector… Even with “copy the selector” when I inspect the element directly from the page.
I tried also to use the SET Node to put a bit JS code to find the element with json.parse
The issue here is that Google Maps is mostly SPA(single-page application), which means it renders the content using javascript when you visit it. But the HTTP node gets the server-side response before this JS is compiled and rendered. I see 3 ways to get the data you need.
1. Use meta attributes
Instead of using CSS selectors to get the content of elements(those are not rendered at that point), we can get the content attribute of <meta> tag which Google is using to enrich their search results. The disadvantage of this method is that not all the data could be retrieved this way. It’s easy to get the address and title of the place, but we can’t get the phone and opening times as those are not included in the metadata. Here’s an example workflow to demonstrate how we can get an address, description, and cover picture. There are two additional nodes that I think you might find interesting — another HTTP request node to fetch the image and “Edit Image” to draw the address and description onto the image.
2. Instead of using Google Maps, use regular Google Search
Google Search is server-side rendered. This means we can get usable HTML with HTTP fetch node. Here, we run into an obstacle were Google obfuscates the classes and most of the identifiable attributes. So we can’t rely on a single class to get us what we need. But we can use data attribute selector for one of the attributes Google Search doesn’t obfuscate — data-attrid. We can use this as a selector.
For more info about data attribute selectors, you can check this article. This should get us a phone and reviews data. Here’s an example workflow.
3. Use the official Google Place API
Google offers API to get data about places, you can read more about it here. This would be the most robust solution that should work long-term. The problem with the previous two approaches is that Google might change the element attributes any day and your workflow would stop working. But the API is versioned and hence stable.
Unfortunately, we don’t currently have a Google Places node. But we do support Google oAuth2 credentials, so you could use HTTP node to interact with the API and n8n would handle the authentication for you.
