Skip Navigation

[Resolved] Populate map marker icon from custom post field

This thread is resolved. Here is a description of the problem and solution.

Problem:

How to feed the map marker icon from an image custom field?

Solution:

You need to use the legacy Views Maps:

https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

Then use the Maps shortcodes to feed the custom field inside the marker_icon attribute such as:

[wpv-map-marker map_id='Dallas-Fort-Worth-Map-Test' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address' marker_icon='[types field="marker-icon" size="thumbnail" url="true"]'][/wpv-map-marker]

In the code above the shortcode below:

[types field="marker-icon" size="thumbnail" url="true"]

retrieves the image URL from the custom field and you feed it to the marker_icon attribute.

Relevant Documentation:

https://toolset.com/forums/topic/custom-image-as-map-icon-marker/#post-2008503

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

This topic contains 7 replies, has 2 voices.

Last updated by michaelB-49 1 year, 6 months ago.

Assisted by: Christopher Amirian.

Author
Posts
#2467793

Tell us what you are trying to do?
I'm trying to populate the map marker icon from an image field that I store in each custom post field group.

Is there any documentation that you are following?
Not really, couldn't find any for what I'm trying to do, although I might be missing it as this seems like it should be a common request.

Was looking at this initially but couldn't translate it to the current version of Toolset:
https://toolset.com/forums/topic/custom-markers-per-address-with-maps/

Is there a similar example that we can see?
No.

What is the link to your site?
Here's the page where I'm trying to get the markers to pull from the correct field:
hidden link

The field I want to use for each map marker is Marker Icon (marker_icon) in the Post Field Group for Locations.

I know this probably sounds super simple, but I am having a rough time trying to figure it out! Thanks for your help.

#2468869

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

That is not possible with the Toolset blocks. It is possible to add custom markers manually following the steps below:

Go to the Toolset → Settings page and click the Maps tab. There, look for the Map markers section and click the Add a new marker button.

But if you want to have a dynamic custom map marker you will need to enable the Legacy mode in Toolset:

https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

And add a classic view where you can use shortcodes to add the map and thee you can use the shortcodes to assign the custom field shortcode inside the attribute of th emap shortcode.

For more information:

https://toolset.com/forums/topic/custom-image-as-map-icon-marker/#post-2008503

Thanks.

#2471453

Hi Christopher,

Thanks, sounds like we're on the right track. Your response made me re-think how we should be coding this, and I have code already working (from another Toolset support agent a while ago) on a test site you can see at the link below (it's not pretty, was just designed to test different map markers per location type):

hidden link

On that site, we have a shortcode in the View Loop like you suggested, although we did NOT change the interface settings like you mentioned -- they are set to this: "Show only the Blocks interface".

Here's the shortcode we use on that site to make the page work:

[wpv-conditional if="( '[wpv-post-type]' eq 'restaurant')"]
[wpv-map-marker map_id='Dallas-Fort-Worth-Map' marker_id='marker-[wpv-post-id]' marker_icon='//adventureswithmydog.com/wp-content/uploads/2022/03/Restaurant-Map-Icon.png' marker_field='wpcf-location-address'][wpv-post-link][/wpv-map-marker]
[/wpv-conditional]

[wpv-conditional if="( '[wpv-post-type]' eq 'park')"]
[wpv-map-marker map_id='Dallas-Fort-Worth-Map' marker_id='marker-[wpv-post-id]' marker_field='wpcf-location-address' marker_icon='//adventureswithmydog.com/wp-content/uploads/2022/04/Park-Map-Icon.png'][wpv-post-link][/wpv-map-marker]
[/wpv-conditional]

What I now need to do on the new site is instead of checking the WPV-POST-TYPE, I just want to set the marker_icon value = the WPCF-MARKER-ICON field. Here's the new test page I'm using for this:
hidden link

Unfortunately I can't get any of the code I'm putting in that shortcode section to work right now, seems like it's basically ignoring it (or I've messed up some syntax maybe?).

Here's the code I'm using, which does set the map properly (all the points are there), but the map markers are invisible:

[wpv-map-marker map_id='Dallas-Fort-Worth-Map' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address' marker_icon=[wpcf-marker-icon output='url']][/wpv-map-marker]

Can I send over login creds again so you can see the page in action and see if I'm dealing with some kind of bug, just me messing up the code, etc?

Thanks Christopher.

#2472915

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

I will do my best to check but please consider that there is no guarantee. I will spend time on that,

I'd appreciate it if you could give me the URL/User/Pass of your WordPress dashboard. Only the test site please not the live site

Make sure you set the next reply as private.

One last thing is that the map icon attribute shortcode is not wrapped in " so I suggest that you test this:

[wpv-map-marker map_id='Dallas-Fort-Worth-Map' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address' marker_icon='[wpcf-marker-icon output="url"]'][/wpv-map-marker]

Thank you.

#2474851

Christopher Amirian
Supporter

Languages: English (English )

Screen Shot 2022-10-12 at 18.37.19.png

Hi there,

Here is the correct code:

[wpv-map-marker map_id='Dallas-Fort-Worth-Map-Test' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address' marker_icon='[types field="marker-icon" size="thumbnail" url="true"]'][/wpv-map-marker]

To retrieve the image field with URL you need to use the types shortcode according to this documentation:

https://toolset.com/documentation/customizing-sites-using-php/functions/#image (Check the shortcode section with URL)

Now if you search the city "Mansfield" I added a green icon for one of the locations there and you can see in the map that it reflects the correct image. (Check the attached screenshot)

Thank you.

#2475095

Thank you Christopher, that's outstanding!

The only issue it creates is that we have code in the HINT CONTENT and the POP-UP CONTENT, which you can see on this page:
hidden link

Now I don't know how to populate that content once we move the marker code into the shortcode instead of on the map itself, if that makes sense.

#2475345

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

For this, you need to create a content template and name it 'Marker-Info-Popup'. Add your pop up content to that content template.
Then you can use that name and add the pop up content inside the map marker shortcode like this:

[wpv-map-marker map_id='Dallas-Fort-Worth-Map-Test' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address' marker_icon='[types field="marker-icon" size="thumbnail" url="true"]'][wpv-post-body view_template="Marker-Info-Popup"][/wpv-map-marker]

For more information:
https://toolset.com/forums/topic/customizing-the-pop-up-on-a-map/#post-1581189

Thanks.

#2478679

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.