[Resolved] Maps: focus on marker is not working as expected

[Author]

Posts

[Alexander Rothschild]

If you scroll to the end of this post - hidden link, you will see a view with related posts that are dynamically shown on a map.

I used the Focus on the Info Marker functionality to trigger the info popup when any of the items are clicked. Unfortunately, only the info box for the first item in the view is ever shown.

I'm not surprised that this does not work - the links generated for each item are identical and lacking the location detail. Which makes me wonder what's the purpose of the current functionality is, and if there is a way to achieve our use case where a view grid of items is linked to a map?

I also see how this was possible with the old legacy shorcode plugin - https://toolset.com/forums/topic/highlight-a-point-on-a-map-by-clicking-on-the-post-in-a-table-below-like-google/ But is there a new gutenberg way?

[Waqar]

Hi,

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

On my test website, I was able to make this work with a Gutenberg (blocks) view, using the following steps:

1. I added a "Map" block, but didn't select the "View block" as the source for the markers.

2. Inside the loop of the view, I added a "Fields and Text" block and inserted "wpv-map-marker" shortcode, for the address field with slug "post-location":
( ref: https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#wpv-map-marker )

[wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-post-location']
[types field='post-location'][/types]
[/wpv-map-marker]

Please make sure to replace "map-1" and "post-location" with your actual Map ID and the location field's slug, respectively.

3. Below the map marker shortcode, I also included the link for the focus on a map marker, like this:
( ref: https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#map-focus-on-marker )

<a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-hover-map-map-1-marker-marker-[wpv-post-id] js-toolset-maps-open-infowindow-map-map-1-marker-marker-[wpv-post-id]" data-map="map-1" data-marker="marker-[wpv-post-id]">Show</a>

Please note how the Map ID ( map-1 ) and marker_id ( marker-[wpv-post-id] ) has been used to match the ones used in the "wpv-map-marker" shortcode.

I hope this helps and let me know if you need any further assistance around this.

regards,
Waqar

[Alexander Rothschild]

This has worked great, Waqar - thank you! 🙏