[Resolved] Highlight a point on a map by clicking on the post in a table below like google.

[Author]

Posts

[andrewD-10]

Tell us what you are trying to do?

Hi team toolset!
We are developing a membership website for our customers which will be a listing of construction projects. We are using toolset to create custom post types and custom fields. We have created a view to show posts in table, which includes map with markers of all posts location (location is CF in each post), table with filters. Popup box including posts information is done after click on each marker. You can see below screenshots.
Map having marker of each post in map view and box pop with some post info: hidden link
Table of posts which is using CF’s: hidden link
We are in need of a function to click a button/post in the table and then scroll up to the map and see the related marker highlighted and popped up.
We are having difficult time add this functionality and we are in desperate need of this function working in our system. Something relevant or similar to Google maps result while searching for restaurants, when we hover on particular marker on map, related post (restaurant) pops up and highlighted. Ref: hidden link

Please let me know a better solution to accomplish our need.
Regards

Also Please see the screenshot from LoopNet. This is exactly what we would like to do with posts.

Let me know if this is possible and if so, how do do it.

Is there any documentation that you are following?

No

Is there a similar example that we can see?

Google map search for restaurants. On the left side is the list of restaurants. When you click on a restaurant in the list, the point on the map pops up or gets highlighted.

What is the link to your site?

[Christian Cox]

Hi, we do offer the "focus on marker" button which has most of this functionality built in (see the attached screenshot). It will create a button or a text link for you. You can set the button/link to focus on the marker, set it so that hovering on the button/link acts like hovering on the marker, and you can also have it open the corresponding infowindow popup when clicked. However, it does not handle scrolling the page back to the map. That would require custom JavaScript programming, and you can find some examples of that in this other ticket: https://toolset.com/forums/topic/totop-when-js-wpv-addon-maps-focus-map/

Let me know if you have questions about that.

[andrewD-10]

Hi Christian,

Thank you for your help thus far. I was able to get the focus on map button to work, but with one issue. In the table when I click on focus on map, it will only go to the point correlating with the post on the first row in my table. This will happen even if I click on the button in the third row of the table.

How can I make each button unique to go to the desired post?

Attached is the code and screenshot of the map so far.

Thank you,
Andrew

[Christian Cox]

Each of your marker IDs should be unique, but it looks like yours are all "marker-26". You can fix that by appending the post ID to the map marker shortcode, as well as the focus link:

[wpv-map-marker map_id='map-3' marker_id='marker-26-[wpv-post-id]' marker_field='wpcf-project-location']

<a href="#" class="js-wpv-addon-maps-focus-map" data-map="map-3" data-marker="marker-26-[wpv-post-id]">Map View</a>

[andrewD-10]

My issue is resolved now. Thank you!