SOLVED: Map element does not accept ACF fields for location and / or address

Bugs
1

Bricks Version: 1.5.2
Browser: Safari 16.1
OS: macOS

When using ACF fields for Latitude / Longitude or Address, the Google map is no longer displayed in the Bricks Map element. The map changes to a light grey background.

Best,
Chris

2

Hi Christopher,
Thanks so much for your report!

What type of ACF fields are we talking about? I would like to try to reproduce the problem, but I need to know which field types you have used.

Best regards,
timmse

3

Hi timmse,

I used the plugins “Advanced Custom Fields” and “Custom Post Type UI”.

I tried out several options:

  • Latitude and longitude as text (with both “,” and “.” as decimal delimiter) and number.
  • Address as text (e.g. Goerzallee 305D, 14167 Berlin, Germany) and Google Plus code (e.g. C76H+9J Berlin)

Bildschirm­foto 2022-09-20 um 13.29.49
Bildschirm­foto 2022-09-20 um 13.29.491882×1402 271 KB

Best,
Chris

4

Using text fields for Lat, Long and Address work fine for me.
The first map uses the lat/long fields, and the second map the address (Goerzallee 305D, 14167 Berlin, Germany).

To use the address, you must ensure that you have enabled the Geocoding API.
Does your console show errors, and is the map not displayed in the builder and frontend?

Bildschirmfoto 2022-09-20 um 19.36.37
Bildschirmfoto 2022-09-20 um 19.36.371920Ă—1020 127 KB

5

The Geocoding API is enabled. The console reports for the Geocoding API 131 requests, and 2 errors. The error code is 4xx.

I see the grey background on both, the builder and the frontend.

I created a web page that demonstrates the problem: Auto Tissue Berlin Worldwide Bricks Map – Auto Tissue Berlin

In the case of the upper map, the address is entered manually into the address field; in the case of the lower map, the same address is pulled from the ACF field defined as text.

For both maps the API key is correctly displayed in plain text in the page source code. For the API key I have added website restrictions (HTTP referrers) for “autotissue.de” and “autotissue.de/*”. However, it even does not work if I temporarily remove these restrictions.

I don’t understand why the map is displayed correctly when the address is entered manually and copied and pasted from the ACF address field, but doesn’t work when the same text string is pulled from the ACF address field. Did I miss something?

6

When I compare the attributes of the first and second map, the address is empty for the second one. Are you sure that the ACF fields on the page are filled?

I think it would be easiest if you send me access data and a link to this thread to help@bricksbuilder.io. Please use the email address you used during the purchase of Bricks.

7

Hi Christoph,
Thanks so much for the login credentials.

You assign the ACF fields to the “Location” post type. However, the test page for your map does not belong to the Locations, and therefore the ACF fields are not available/empty.

I’ve just created a single type template for the locations, added the map using {address} for the address, and it’s working as expected: DE – Germany – Auto Tissue Berlin

In the template and the template preview, however, the map remains gray because the fields are probably not queried (even with populated content). In the frontend, however, it works without problems.

Best regards,
timmse

8

@timmse, many thanks!

Is it possible to show more than one place on a map using the loop builder?

Best regards,
Chris

9

You’re welcome.

Currently not, but it’s already on the idea board:

10

Many thanks! I upvoted this idea :wink: