[Resolved] Focus on marker button doesn't work for repeating address field

[Author]

Posts

[Rita]

Hi there

I have a repeating custom 'address' field for a custom post type.

In the post's content template I have rendered a map with spiderfly and scrollwheel turned off like this:

[wpv-map-render map_id="MAP-ID" map_width="100%" map_height="700px" cluster="off" spiderfy="off" scrollwheel="off" map_type_control="off" marker_icon="ICON-URL" marker_icon_hover="ICON-URL"][/wpv-map-render]

Then added the markers by using the format="FIELD_LONGITUDE" and format="FIELD_LATITUDE" of the address instead of the address itself like this:

[wpv-for-each field="wpcf-ADDRESS-FIELD-SLUG"]
[wpv-map-marker map_id='MAP-ID' marker_id='MARKER-ID' lat='[types field="ADDRESS-FIELD-SLUG" format="FIELD_LATITUDE"][/types]' lon='[types field="ADDRESS-FIELD-SLUG" format="FIELD_LONGITUDE"][/types]' marker_title='[types field="ADDRESS-FIELD-SLUG"][/types]'][types field="ADDRESS-FIELD-SLUG"][/types][/wpv-map-marker]
[/wpv-for-each]

I have set it like this because after reading several support tickets I took some advice from one about the spiderfly and cluster on the map and another about getting the markers to display correctly on a repeating address field. So... This works fine...

But then when I try to add a focus on marker link for each of these addresses it will display the address for each, no problem, but the hover and/or click function only opens or reacts to the first address.

[wpv-for-each field="wpcf-ADDRESS-FIELD-SLUG"]
[types field='ADDRESS-FIELD-SLUG'][/types]
[/wpv-for-each]

Do I need to somehow get the focus on marker link to look at the the geo-codes. I can't figure out why it isn't recognising each pin on the map. And I can't find a support discussion about it. Thinking I have got something wrong 🙂

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Since there are multiple levels of nested shortcodes involved, this will require a custom shortcode.

On my test website, I was able to make this work using these steps:

1. I added this shortcode for the map in the template:

[wpv-map-render map_id="Map-1" map_width="100%" map_height="700px" cluster="off" spiderfy="off" scrollwheel="off" map_type_control="off"][/wpv-map-render]

2. To show the map markers and the map marker focus links, I registered a custom shortcode:

function custom_address_field_func($atts) {
	$a = shortcode_atts( array(
		'field' => '',
		'map_id' => '',
		'marker_id' => '',
	), $atts );

	$post_id = get_the_ID();
	$field_values = get_post_meta($post_id, 'wpcf-'.$a['field'], false);
	$output = '';
	$index = 0;
	foreach ($field_values as $field_value) {
		$field_lat = do_shortcode('[types field="'.$a['field'].'" format="FIELD_LATITUDE" index="'.$index.'"][/types]');
		$field_lon = do_shortcode('[types field="'.$a['field'].'" format="FIELD_LONGITUDE" index="'.$index.'"][/types]');
		$field_value = do_shortcode('[types field="'.$a['field'].'" index="'.$index.'"][/types]');

		$shortcode_string = "[wpv-map-marker map_id='".$a['map_id']."' marker_id='".$a['marker_id']."-".$index."' lat='".$field_lat."' lon='".$field_lon."' marker_title='".$field_value."']".$field_value."[/wpv-map-marker]";

		$output = $output . do_shortcode($shortcode_string);

		$output = $output . '<a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-hover-map-'.$a['map_id'].'-marker-'.$a['marker_id']."-".$index.' js-toolset-maps-open-infowindow-map-'.$a['map_id'].'-marker-'.$a['marker_id']."-".$index.'" data-map="'.$a['map_id'].'" data-marker="'.$a['marker_id']."-".$index.'">'.$field_value.'</a><br>';

		$index = $index + 1;
	}

	return $output;
}
add_shortcode( 'custom_address_field', 'custom_address_field_func' );

The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

3. In the content template where I wanted to show the map marker focus links, I included this new custom shortcode like this:

[custom_address_field field="post-address" map_id="Map-1" marker_id="MARKER-ID"]

Note: Please replace the shortcode attribute values "post-address", "Map-1" and "MARKER-ID" as needed.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[Rita]

Hi Waqar

Thanks very much for your help. I appreciate that and will certainly revert to professional contractors should the need arise. I didn't know that my issue was a bespoke request. I just thought I had made a mistake you see...

The shortcode works very nicely! Thank you.

Only one little thing and that is that the FIRST address (on any post, any address) the 'hover on marker' displays the hover pin behind the original pin. And on every other address it displays the pin correctly, that is, in front of the original pin. You can see this in the screenshot examples attached.

Not sure if this is an issue. Thought to flag it to you just in case.

Rita

[Waqar]

Thanks for the update and glad that the shortcode worked.

I can investigate why the first result's hover pin is showing differently, but I'll need access to the website's admin area.

Can you please share temporary admin login details along with the link to the page with this map?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

[Rita]

Not to worry Waqar. Thanks for the offer but I think I will just take the hover affect out. I am not sure I like it anyway and certainly it won't effect the UX. Thanks again for your help! Rita