Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a View that displays markers on a map, and also a list of results below the map. I would like to set up a link in each result so the User can click it, focus on the map, and open the InfoWindow popup.

Solution: The Focus on Marker feature will do most of this, except for the scroll to map function. That will require custom JavaScript code.

Relevant Documentation:
https://toolset.com/forums/topic/totop-when-js-wpv-addon-maps-focus-map/

This support ticket is created 4 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by andrewD-10 4 years, 4 months ago.

Assisted by: Christian Cox.

Author
Posts
#1379169

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?

#1379469
Screen Shot 2019-11-10 at 3.41.06 PM.png

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.

#1380437
tableview2.png
table view2.png
table view.png
loopoutput.png
loopeditor2.png
loopeditor1.png

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

#1381475

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>
#1383621

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.