[Resolved] Interactive Map with Marker Listing as Table

[Author]

Posts

[collectiveU]

Hi,
I've implemented the map successfully at; hidden link
I'm trying to make the map interactive so that when a user clicks on a marker, it navigates to the related row in the view below.
The code for the view at this stage is:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
[wpv-map-render map_id="map-8" map_height="500" single_zoom="6" cluster="on" marker_icon="//futuregolf.com.au/wp-content/uploads/2019/08/fg_logo_32_black.png" cluster_min_size="5" cluster_grid_size="80"]<div class="text-center">Please wait while we load this map...</div>[/wpv-map-render]
    <div class="wpv-loop js-wpv-loop">
    <wpv-loop wrap="2" pad="true">
      [wpv-map-marker map_id='map-8' marker_id='marker-3' marker_field='wpcf-course-address'][/wpv-map-marker]
            [wpv-item index=1]
                <div class="listview-full-width blue">
                <div class="container" >
                <div class="row">
                <div class="col-sm-12">[wpv-post-body view_template="Loop item in Golf Courses Page Searchable"]</div>
                </div>
                </div>
                </div>
            [wpv-item index=2]
                <div class="listview-full-width">
                <div class="container">
                <div class="row">
                <div class="col-sm-12">[wpv-post-body view_template="Loop item in Golf Courses Page Searchable"]</div>
                </div>
                </div>
                </div>
            [wpv-item index=pad]
                <div class="col-sm-12"></div>
            [wpv-item index=pad-last]
                <div class="col-sm-12"></div>
    </wpv-loop>
    </div>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

And this is the code for the [wpv-post-body view_template="Loop item in Golf Courses Page Searchable"]

<div class="row course-row-cont">
  <div class="col-md-8">
    <h4>[wpv-post-title]</h4>
    	<div class="row">
          <div class="col-md-4">
		<h5>Course Facts</h5>
            <div class="course-fact-wrapper">[types field="course-curiosity"][/types]</div>
          </div>
          <div class="col-md-8">
            <div class="course-describe-loop">[types field="course-description"][/types]</div>
            
            [wpv-conditional if="( $(wpcf-rounds-booked-on).id(free-round) != '5' )"]
            [/wpv-conditional]
            
        	[types field='round-booking-day' style='text' format='d/m/Y' item='@golf-course-free-round.parent'][/types]
            <div class="course-row-actions">            
              <a href="[wpv-post-url]" class="btn btn-primary btn-fg">Read More</a>         
              [wpv-conditional if="( $(wpcf-course-override-message) eq '' )"]
              	[wpv-conditional if="( $(wpcf-course-override-url) eq '' )"] 
             [wpv-conditional if="( '[wpv-user field='mepr-address-state']' eq $(wpcf-course-state)  )"]
              [wpv-conditional if="( $(wpcf-free-round-type-golfround) eq '1' )"]
                  [show_free_golf_round_button text="CLAIM GOLF ROUND"]
              [/wpv-conditional]
              	[/wpv-conditional]
              [/wpv-conditional]
              	[wpv-conditional if="( $(wpcf-course-override-url) ne '' )"]
              [wpv-conditional if="( '[wpv-user field='mepr-address-state']' eq $(wpcf-course-state)  )"]
              [wpv-conditional if="( $(wpcf-free-round-type-golfround) eq '1' )"]
                  [show_free_golf_round_button text="CLAIM GOLF ROUND" href="[types field='course-override-url' output='raw'][/types]"]
              [/wpv-conditional]
                [/wpv-conditional]
              [/wpv-conditional]
              [/wpv-conditional]
              [wpv-conditional if="( $(wpcf-course-override-message) ne '' )"]
              	[wpv-conditional if="( $(wpcf-course-override-url) eq '' )"]
                  [show_free_golf_round_button text="[types field='course-override-message'][/types]"]
                [/wpv-conditional]
              	[wpv-conditional if="( $(wpcf-course-override-url) ne '' )"]
                  [show_free_golf_round_button text="[types field='course-override-message'][/types]" href="[types field='course-override-url' output='raw'][/types]"]
                [/wpv-conditional]
              [/wpv-conditional]
              [wpv-conditional if="( '[wpv-user field='mepr-address-state']' eq $(wpcf-course-state)  )"]
              	[wpv-conditional if="( $(wpcf-free-round-type-rangeballs) eq '1' )"]
                  [show_free_rangeballs_button text="CLAIM RANGE BALLS"]
              	[/wpv-conditional]
              [/wpv-conditional]
              [wpv-conditional if="( '[wpv-user field='mepr-address-state']' eq $(wpcf-course-state)  )"]
              	[wpv-conditional if="( $(wpcf-free-round-type-minigolf) eq '1' )"]
                  [show_free_minigolf_button text="CLAIM MINI GOLF"]
              	[/wpv-conditional]
              [/wpv-conditional]
            </div>
          </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="listview-image" style="background-image: url([wpv-post-featured-image output='url' size='large']);">
    </div>
  </div>
</div>

[Minesh]

Hello. Thank you for contacting the Toolset support.

We offer a way that you can use to focus the marker when you click on the link.

When you click on "Fields and Views" button and you should try to search for "Focus on marker" button.

For example:

<!-- Example 1 -->
<a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-hover-map-3-marker-mark js-toolset-maps-open-infowindow-map-3-marker-mark" data-map="map-8" data-marker="[wpv-post-id]-marker-id">Focus</a>

Where:
- Where you should use the Forcust on Marker button GUI to generate the above link.

More info:
=> https://toolset.com/documentation/user-guides/maps-shortcodes/#map-focus-on-marker