[Resolved] Customizing product frontend adding Map with address custom fields

[Author]

Posts

[marcoB-12]

Hi,
I'm trying to customize product on my development site way4go.com.
My goal is to add Google Maps on product frontend (in the description) using Address custom fields in the product backend and wrapping shortcode in the product description.
But it doesn't works..in the product frontend appears only the address string or the geo coordinates and not the map.
The example is hidden link
Could you help me please?
If you know any other method to insert custom fields address Maps in the product layout could you suggest me please.
I think the theme I choose (Rehub) is not fully compatible with Gutemberg block and there are some issue using Toolset block. Do you think the same?

Any suggestions is much appreciated.
Thank you.
Marco

[Christian Cox]

My goal is to add Google Maps on product frontend (in the description) using Address custom fields in the product backend and wrapping shortcode in the product description...But it doesn't works..in the product frontend appears only the address string or the geo coordinates and not the map.
Hello, I'm not famliar with this specific theme but I can investigate the problem here and try to find the best solution. I was trying to find a Product post where I can see the problem on the front-end of the site, but I'm not sure where to look. The link you shared is a wp-admin link: hidden link
I checked a couple of Prodotto posts but the templates are quite different and I see a functioning map in the Destinazione section of the Tenerife post:
hidden link
hidden link
So I'm a bit confused. It might be faster for me to log into wp-admin to understand things better. If that is okay, please provide login credentials in the private reply fields here. I will take a closer look.

[Christian Cox]

Okay thank you for that information. I'm looking at this post now:
hidden link

Post editor page:
hidden link

Here is the original code from the Description section:

[types field='fermata' separator=', '][/types]
[wpv-conditional if="( $(wpcf-map-address) ne '' )"]	 
[wpv-map-marker map_id='programs-map' marker_id='program-marker' marker_field='wpcf-map-address'][/wpv-map-marker]	 
[/wpv-conditional]

Here is the updated code:

[types field='fermata' separator=', '][/types]

[wpv-conditional if="( $(wpcf-fermata) ne '' )"]
[wpv-map-render map_id="tssupp-test-map" map_width="500" map_height="250"][/wpv-map-render]
[wpv-map-marker map_id='tssupp-test-map' marker_id='tssupp-test-program-marker' marker_field='wpcf-fermata'][/wpv-map-marker]
[/wpv-conditional]

You can see I changed the conditional to test the if the fermata field has any values. The conditional was originally set to test a field map-address, but that field does seem to exist on your site. This is one reason why you did not see any map on the front-end. The other reason is the wpv-map-render shortcode was not included. Both wpv-map-render and wpv-map-marker are required to show a map and a marker on the map. I added an example wpv-map-render shortcode here so you can see how it works. Notice the map_id attributes are identical for the two shortcodes. Another important attribute is marker_id. That should be a unique value. The marker_field attribute tells the marker to look for addresses in the fermata custom field. In the current post, the fermata custom field has multiple values, so multiple markers are shown on the map.

Let me know if you have questions about this. We have documentation for these shortcodes here: https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/

[marcoB-12]

Thank you, Christian!
Very clear explanation, I will study the documentation starting from your code.
Marco