[Resolved] Map with Marker Listing as Table

[Author]

Posts

[collectiveU]

Hi,
We have this page at the moment hidden link which shows a list of data from a custom post type.

I'm wanted to create another version of this similar to the below example where there is an enteractive map with a dynamic table below it based on custom toolset field types.
hidden link

I can see that with our subscription of Toolset, we also have Toolset Maps available which I think can be used to establish this.

I couldn't find any specific documentation or samples to achieve this.

Please advise.

Cheers

[Nigel]

Hi there

the documentation for adding maps with markers that come from posts is here: https://toolset.com/documentation/user-guides/display-on-google-maps/

I don't know if you've read any of the maps documentation yet or tried to implement it.

Can you check the documentation and then if you are stuck somewhere let me know specifically what you are having problems with, then I can help.

You will be creating a View to display posts—which include an address field—and that View can output both the list of results (in tabular format if required) as well as the map with the markers on the map. Clicking on the results in the list can also focus on that marker on the map.

Let me know specifically what you need help with as you try to implement it.

[collectiveU]

My issue is resolved now. Thank you!

[collectiveU]

Hi Nigel,
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]

[Nigel]

Looks like you opened another thread with Minesh so I'll let him deal with the details, but I'll just note that you can't directly do what you are aiming for.

The opposite is envisaged, namely you can click on a result from the list and focus on the corresponding marker (see https://toolset.com/documentation/user-guides/maps-shortcodes/#map-focus-on-marker).

Markers can have content within the shortcode that displays as a pop-up when the marker is clicked. Typically you would include a link to the post itself, but you could dynamically generate id attributes for the rows of your table (e.g. id="table-row-[wpv-post-id]") and then add anchor tags linking to the same to your marker content, so you click on the marker which produces a pop-up with a link, then you click on the link to go to the table row.