[Gelöst] Reload [wpv-map-render] via [wpv-map-marker] datas and some filters

[Author]

Artikel

[ricoF]

Hi Team,
if have a form with some search options like

<input type="text" ... 
<input type="radio" ...
<input type="checkbox"  ...

After that i render a map via

echo do_shortcode('[wpv-map-render map_id="my-map" map_height="50vh" cluster="on" cluster_max_zoom="12" street_view_control="off" map_type_control="off"][/wpv-map-render]');

And i have a wp_query loop to echo a list of found posts. Inside this loop the markers are set via

echo do_shortcode('[wpv-map-marker map_id="my-map" marker_icon="' . $icon . '" marker_id="marker-' . $post->ID . '" marker_title="' . esc_attr(str_replace(['[', ']'], [''], $post->post_title)) . '" address="' . esc_attr($address) . '"]' . $info_window . '[/wpv-map-marker]');

(the

$address

is a compination of three custom fields street, zip code and city)

In my js i have a jquery function wich filters the loop against the inputs. The JS toggle a active class to hide / show a container if a searchword found or a term is defined.

The map with clustering is working great. The search, filter etc. in my loop via js works great too.

First: Now i want to filter also the map. With

WPViews.view_addon_maps.reload_map('my-map');

i can reload the map. But how can hide / show the marker in that map depending on the loop?

My Idea is to check wich divs are visible in the loop list, get the id from a dataset, look in the markers for this id and filter the markers. Or is there a better way?

Second: i want to include a distance filter via

[wpv-control-distance ... compare_field="..."]

. But what is the compare_field value? Can i set the custom fields like

[wpv-control-distance ... compare_field="[types field='street'][/types],[types field='zip'][/types] [types field='city'][/types]"]

?
An how do i send this distance to the js to reload the map?
My idea is to add a lat/lng attribute and compare this with the distance range.

Best

[Minesh]

Hello. Thank you for contacting the Toolset support.

The help you are asking is for pure custom javascript code and to support such custom edits is beyond the scope of our support policy. However - I will share here few hooks that might help you.

To get the markers list you should use the following line of code:

var markers = WPViews.view_addon_maps.markers;

You can also check the Maps Javascript API hooks:
- https://toolset.com/documentation/programmer-reference/maps/programmatically-change-map-settings/#changing-settings-when-using-google-maps-api

Here are few reference tickets that might help you:
- https://toolset.com/forums/topic/toolset-map-selected-pin-list/#post-2353669
- https://toolset.com/forums/topic/retrieving-marker-id-or-custom-post-id-in-a-view-based-on-focus-within-map/#post-1198248\

Regarding the distance filter, the distance filter can only work from the server, not via JavaScript. The wpv-control-distance shortcode is to output the form inputs for a distance filter which works via the server (either a page refresh or ajax update) where you input the address text and chose the radius in (mi/km).

Even I'm not sure why you using such custom method to filter the map results as you can simply use the view that will allow you to filter the map results and even allow you to add the distance search:
- https://toolset.com/course-lesson/filtering-and-ordering-map-markers-by-distance/

When you add distance filter to your view - this is the shortcode added to Search and pagination section:

[wpv-control-distance distance_unit_url_param="toolset_maps_distance_unit" distance_radius_url_param="toolset_maps_distance_radius" distance_center_url_param="toolset_maps_distance_center" compare_field="address"]

Where:
- As you can see you will have to pass the custom "address field slug" you created using the Types plugin.

[ricoF]

Hi Minesh,
thank you.

It is possible to use

[wpv-control-distance ... compare_field="[custom field a], [custom field b], [custom field c]"]

with multiple custom fields like in my question above?
Or, if it's not possible, how can i echo the address datas like city, street etc. separately in the frontend?

Best

[Minesh]

No - Toolset distance search shortcode needs address field to compare with where it will search for the addrdess text that is input by user to distance search text address field and when you submit it, it will compare the input address string against the address field you setup with distance search shortcode attribute 'compare_field'.

There is no such solution available however - please check the following related ticket that might help you:
- https://toolset.com/forums/topic/separating-content-from-the-address-field/#post-522506

And as always, You can contact any of our certified partners who will be able to give you professional assistance for any custom requirement you have. Here is the list of our contractors:
- https://toolset.com/consultant/

[ricoF]

Ok, thank you.
You were surprised about my custom code. That's why.
There's a lot of custom code with toolset because special functions are not possible. So i'm my own professional assistance 🙂
Another point is, that writing code in a professional code editor are easyer instead of the toolset gui.