[Resolved] How to activate address on the map from search results

[Author]

Posts

[zeljko-turkaljS]

Tell us what you are trying to do?
Creating a map with office locations

Is there any documentation that you are following?
No

Is there a similar example that we can see?
Not sure

What is the link to your site?
hidden link

Would love to have a link / button on search results, bellow map, when you click on that link / button that corresponding office is active on the map. Is that possible?

Thanks in advance

[Minesh]

Hello. Thank you for contacting the Toolset support.

You can add the "Focus on marker" as either button or link.

Edit your view and with the "Fields and Views" button available with your view's "Loop Editor" section, click on "Fields and Views" button and you should search for "Focus on marker" and then you should make sure to provide correct map ID and replace the marker number digit with dynamic post ID.

For example:
- When you add the focus on marker as link, it should be displayed as given under:

  
<a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-open-infowindow-map-map-2-marker-marker-[wpv-post-id]" data-map="map-2" data-marker="marker-[wpv-post-id]">view on map</a>

Where:
- with above example the map id is "map-2".

More info:
- https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#map-focus-on-marker

[zeljko-turkaljS]

Hi Minesh, thanks so much for you quick response. Here is what I did:

Map code
[wpv-map-render map_id="officeMap" cluster='off' spiderfy='on' cluster_grid_size="50" map_height="640px" map_type_control="off"][/wpv-map-render]

Marker
[wpv-map-marker map_id='officeMap' marker_id='officeMarker' marker_title='[wpv-post-title]' marker_field='wpcf-office-address'][types field='office-page-title-image' title='[wpv-post-title]' alt='[wpv-post-title]' align='center' size='thumbnail' resize='proportional' class='' style=''][/types][wpv-post-title]<br/>View Office[/wpv-map-marker]

Focus on marker
view on map

The page with map
hidden link

It is not working for me. Am I doing something wrong?

[Minesh]

Can you please send me admin access details and let me check whats going wrong with your setup.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

The marker ID should be unique. With map marker shortcode I've changed the attribute as: marker_id='officeMarker-[wpv-post-id]'

[wpv-map-marker map_id='officeMap' marker_id='officeMarker-[wpv-post-id]' marker_title='[wpv-post-title]' marker_field='wpcf-office-address']<a href="[wpv-post-url]">[types field='office-page-title-image' title='[wpv-post-title]' alt='[wpv-post-title]' align='center' size='thumbnail' resize='proportional' class='' style=''][/types][wpv-post-title]</a><br/><a href="[wpv-post-url]">View Office</a>[/wpv-map-marker]

Then I've also adjusted the focus on marker link as given under:

<a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-open-infowindow-map-officeMap-marker-officeMarker-[wpv-post-id]" data-map="officeMap" data-marker="officeMarker-[wpv-post-id]">View on Map (<i class="fa-solid fa-map-pin"></i>)</a>

Can you please confirm it's working as expected now: hidden link

[zeljko-turkaljS]

Awesome Minesh, it is working.

One additional question, after hitting the view on map icon, is it possible to scroll up to the map?

Thanks in advance
Sasa

[Minesh]

You can bind the click event with your focus on marker link and when user click on that you should use custom jQuery code to scroll to top.

Following link may help you:
- https://stackoverflow.com/questions/14536800/how-to-scroll-up-with-jquery
- https://stackoverflow.com/questions/2275274/jquery-scroll-to-top-of-page

Glad to know that solution I shred help you to resolve your issue.