Extract an text element from an HTTP request using set or HTML extract

Describe the issue/error/question

Hi N8N’s friends,

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)
Capture d’écran 2023-02-14 à 15.50.13

  1. 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.
    Capture d’écran 2023-02-14 à 15.30.54

  2. I tried also to use the SET Node to put a bit JS code to find the element with json.parse
    Capture d’écran 2023-02-14 à 15.31.41

  3. I tried finaly to use SET Node…

Capture d’écran 2023-02-14 à 15.33.26

What is the error message (if any)?

Please share the workflow

Share the output returned by the last node

[empty array]
[empty array]
[empty array]

Information on your n8n setup

Running version [email protected]

Hi @hob, welcome to the community! :tada:

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.

I hope that answers your question.

Happy hacking!



Hi @oleg,

First of all, thank you for your time,

We share the same vision, for the moment I did a V1 of my worflow with an HTTP Get and scrap the content in step 2.

I’ll scale my workflow with the API of google.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.