[Resolved] Create Link on CPT Content Template That Links to Map Marker Focused

[Author]

Posts

[Clayton Chase]

Hey guys,

I'm wondering if it is possible to create a link on a content template of a CPT that links back to the page the map is on and focuses in on the address stored for that post? I hope that makes sense. I've looked through documentation and other tickets but can't find a working solution.

Basically I'm storing the address in a field on a custom post type and I'd like to then create a link that focuses on that point on my Toolset Map on a page where I've created my view and map.

[Jamal]

Hello Clayton and thank you for contacting Toolset support.

The "Focus on Marker" feature is implemented using Javascript, so, it can't work across pages. At least, not without custom code. You can have this feature on the same page. For example, the page where the view and the map are can have links for posts that will focus on each post's marker on the map. But from a different page, that can't be done out of the box.

You may, as a workaround, build a special link(for example, that has a URL parameter ?focus-on=1234, where 1234 is the post ID) and have a special Javascript code that will look for the URL parameter "focus-on" and programmatically trigger a click on a hidden "Focus on Marker" button the view's page. Does it make sense?

I hope this answers your question. Let me know if you have any questions.

[Clayton Chase]

Hey Jamal,

Thanks for explaining how it works a bit. Would you be able to include a code snippet to get me started?

[Jamal]

First of all the map and view should be created with the legacy editor. We have currently a bug that prevents the focus-on-marker feature to work on blocks-based views.

Basically, you will add a URL parameter to the post's URL, for example(?focus-on=[wpv-post-id]):

<a href="<em><u>hidden link</u></em>;">View on the map</a>

Then, on the target page, you will add a Focus on marker link or button, and a marker. The marker_id should be the same as data-marker. And you must use the correct map id. Check this documentation https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#map-focus-on-marker

<button class="js-wpv-addon-maps-focus-map" data-map="map-6" data-marker="[wpv-post-id]-marker-id">Focus on marker</button>
[wpv-map-marker map_id='map-6' marker_id='marker-[wpv-post-id]' marker_field='wpcf-location'][/wpv-map-marker]

And then add the Javascript code that will check the URL parameter and trigger the click event if necessary, the code should wait for the map initialization to complete, and set a timeout to let the API put the marker on the maps. Something like:

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}
jQuery(function($){
  $( document ).on( 'js_event_wpv_addon_maps_init_map_completed', function( event, data ) {
    // console.log('map init completed')
    setTimeout(function(){
      var focusOn = urlParam('focus-on')
      // console.log('setTimeout and focus on', focusOn)
      jQuery('button[data-marker="marker-' + focusOn +'"]').click()
    }, 3000)
  });
})

Please note that custom code is out of the scope of the support forum. If you are not comfortable with programming, consider hiring a developer. Here is a list of our partners https://toolset.com/contractors/

[Clayton Chase]

I'm using the block view builder so this solution won't work anyway. I appreciate your help though.