[Closed] Focus on Marker, Open Popup not Working in a View, but Works on Single Listings

[Author]

Posts

[rodneyf]

I have a test view with a handful of listings that are also shown on a map using an address custom field. The markers show on the map correctly, and the popups work correctly. I am trying to get the "focus on marker" link to work within the view without any luck. It works correctly on the single listing page maps.
I am building the view using the block editor. Here's the code from the local test site:

<!-- wp:toolset-views/view-editor {"reduxStoreId":"views-editor-1599746286694","viewId":394,"viewSlug":"new1","previewId":395,"insertExisting":"0","wizardDone":true,"wizardStep":3} -->
<div class="wp-block-toolset-views-view-editor wpv-gutenberg-view-wrapper-394"><!-- wp:toolset-views/custom-search-container {"style":{"cssClasses":[]}} -->
<div class="wp-block-toolset-views-custom-search-container">[wpv-filter-start hide="false"] [wpv-filter-controls]<div><!-- wp:toolset-views/custom-search-filter {"field":{"shortcode":"wpv-control-post-taxonomy","name":"States","params":{"attributes":{"taxonomy":"state"}},"present":"tax_state_relationship"},"shortcode":"[wpv-control-post-taxonomy taxonomy='state' url_param='wpv-state' type='select']","style":{"cssClasses":[]},"labelText":[],"content":"\u003cdiv class=\u0022form-group\u0022\u003e\u003c!\u002d\u002d ## \u002d\u002d\u003e\u003clabel class=\u0022wpv-custom-search-filter__label\u0022 for=\u0022state\u0022\u003e[wpml-string context=\u0022wpv-views\u0022]States[/wpml-string]\u003c/label\u003e\u003c!\u002d\u002d ## \u002d\u002d\u003e\u003cspan class=\u0022wpv-custom-search-filter__input\u0022\u003e[wpv-control-post-taxonomy taxonomy='state' url_param='wpv-state' type='select']\u003c/span\u003e\u003c/div\u003e"} -->
<div class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top" data-toolset-views-custom-search-filter="1"><div><div class="form-group"><label class="wpv-custom-search-filter__label" for="state">[wpml-string context="wpv-views"]States[/wpml-string]</label><!-- ## --><span class="wpv-custom-search-filter__input">[wpv-control-post-taxonomy taxonomy='state' url_param='wpv-state' type='select']</span></div></div></div>
<!-- /wp:toolset-views/custom-search-filter -->

<!-- wp:toolset-views/custom-search-filter {"field":{"shortcode":"wpv-control-post-taxonomy","name":"Counties","params":{"attributes":{"taxonomy":"county"}},"present":"tax_county_relationship"},"shortcode":"[wpv-control-post-taxonomy taxonomy='county' url_param='wpv-county' type='select']","style":{"cssClasses":[]},"labelText":[],"content":"\u003cdiv class=\u0022form-group\u0022\u003e\u003c!\u002d\u002d ## \u002d\u002d\u003e\u003clabel class=\u0022wpv-custom-search-filter__label\u0022 for=\u0022county\u0022\u003e[wpml-string context=\u0022wpv-views\u0022]Counties[/wpml-string]\u003c/label\u003e\u003c!\u002d\u002d ## \u002d\u002d\u003e\u003cspan class=\u0022wpv-custom-search-filter__input\u0022\u003e[wpv-control-post-taxonomy taxonomy='county' url_param='wpv-county' type='select']\u003c/span\u003e\u003c/div\u003e"} -->
<div class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top" data-toolset-views-custom-search-filter="1"><div><div class="form-group"><label class="wpv-custom-search-filter__label" for="county">[wpml-string context="wpv-views"]Counties[/wpml-string]</label><!-- ## --><span class="wpv-custom-search-filter__input">[wpv-control-post-taxonomy taxonomy='county' url_param='wpv-county' type='select']</span></div></div></div>
<!-- /wp:toolset-views/custom-search-filter -->

<!-- wp:toolset-views/custom-search-submit -->
<div class="wpv-custom-search-filter-submit" data-toolset-views-custom-search-submit="1">[wpv-filter-submit name="Submit" class="" type="input"]</div>
<!-- /wp:toolset-views/custom-search-submit -->

<!-- wp:toolset-views/custom-search-reset -->
<div class="wpv-custom-search-filter-reset" data-toolset-views-custom-search-reset="1">[wpv-filter-reset reset_label="× Clear all filters" class="" type="input"]</div>
<!-- /wp:toolset-views/custom-search-reset --></div>[/wpv-filter-controls] [wpv-filter-end]</div>
<!-- /wp:toolset-views/custom-search-container -->

<!-- wp:toolset-views/view-layout-block -->
<!-- wp:toolset/map {"mapId":"map-1","mapCenterLat":"6","mapCenterLon":"5","markerId":"[\u0022marker-[wpv-post-id]\u0022]","markerSource":"[\u0022view\u0022]","popupContent":"[\u0022{{wpv-post-link}}\u0022]","markerDynamicAddress":"[{\u0022postProvider\u0022:\u0022__current_post\u0022,\u0022source\u0022:\u0022toolset_custom_field|field-group-for-listings\u0022,\u0022field\u0022:\u0022address\u0022,\u0022isActive\u0022:true}]","markerView":"[394]","markerPreviewView":"[395]","markerViewField":"[\u0022wpcf-address\u0022]"} /-->

<!-- wp:toolset-views/sorting {"label":"Sort by"} -->
<div class="wp-block-toolset-views-sorting wpv-sorting-block"></div>
<!-- /wp:toolset-views/sorting -->

<!-- wp:toolset-views/view-template-block {"storeId":"views-editor-1599735968001","style":{"cssClasses":[]}} -->
<div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="1"><!-- wp:toolset-blocks/image {"dynamic":{"url":{"isActive":true,"provider":"__current_post","source":"toolset_custom_field|field-group-for-listings","field":"gallery"},"href":{"isActive":true,"provider":"__current_post","source":"post-url"}},"url":"hidden link","id":30,"linkDestination":"dynamic-source","lightbox":{"enabled":false,"group":null}} -->
[tb-dynamic-container provider='__current_post' source='toolset_custom_field|field-group-for-listings' field='gallery']<figure class="wp-block-image tb-image tb-image-dynamic" data-toolset-blocks-image="1"></figure>[/tb-dynamic-container]
<!-- /wp:toolset-blocks/image -->

<!-- wp:toolset-blocks/fields-and-text -->
<div class="tb-fields-and-text" data-toolset-blocks-fields-and-text="1"><p>view on map</p></div>
<!-- /wp:toolset-blocks/fields-and-text -->

<!-- wp:toolset-blocks/fields-and-text -->
<div class="tb-fields-and-text" data-toolset-blocks-fields-and-text="1"><p>[wpv-post-link]</p></div>
<!-- /wp:toolset-blocks/fields-and-text -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:toolset-views/view-template-block -->

<!-- wp:toolset-views/view-pagination-block {"maybePaginationEnabled":true} -->
<div class="wpv-pagination-nav-links" data-toolset-views-view-pagination-block="1">[wpv-pager-nav-links output="bootstrap" anchor_text="%%PAGE%%" ellipsis="..." ]</div>
<!-- /wp:toolset-views/view-pagination-block -->
<!-- /wp:toolset-views/view-layout-block --></div>
<!-- /wp:toolset-views/view-editor -->

Thanks!

[Shane]

Hi Rodney,

Thank you for getting in touch.

Can you send me a link to the page where this works and the one where it doesn't work so that I can do a comparison ?

Thanks,
Shane

[rodneyf]

Shane,

I can provide a link and credentials to the development site where you can view the pages. How do I do that privately?

Thanks,
Rodney

[Shane]

Hi Rodney,

Here are the private fields for your next response.

Thanks,
Shane

[Shane]

Hi Rodney,

Thank you I was able to clearly see the issue.

Would you mind providing admin access so that I can check this out on the backend as well ?

I've enabled the private fields once more.

Thanks,
Shane

[Shane]

Hi Rodney,

So your method actually won't work. This is because the map essentially isn't incrementing the marker ID based on the shortcode.

The marker is getting the ID from the current page that the view is placed on and not the posts in the loop. What you can try doing is to create an html tag inside the marker content and see if this will work.

However I cannot guarantee this base don how the map works and the markers work.

Thanks,
Shane

[rodneyf]

Shane,
Thanks for looking into this. I tried what you suggested, but it did not work. Is there any other way to implement this? I have seen people successfully build this into a view, but I do not think they were using the block editor. Does that make a difference? My goal was to build a two column view with map on one side, results on the other, so focusing on a marker would have been a nice addition.

Thanks,
Rodney

[Shane]

Hi Rodney,

I believe this is possible using the classic view setup. Are you familiar with how to do this with classic views ?

You will need recreate this by using the classic view as at the moment the marker isn't looping to get the correct id of the post.

Once I can verify that this is replicable on a fresh install then I will make a report to our 2nd tier supporters for further checks.

Thanks,
Shane

[rodneyf]

Shane,

I am not familiar with classic view, but will give it a shot. Any issue with building in classic views with future updates, etc potentially causing issues?

Thanks,
Rodney

[Shane]

Hi Rodney,

Classic views will always be maintained alongside our Blocks setup, so you won't need to worry about any compatibility issues in the future.

If you're having any issues with the classic setup please let me know.

Thanks
Shane