[Resolved] Focus on map marker corresponding to post in View results

[Author]

Posts

[Akhil]

Hi, in my archive page, i would like to have a map icon . when you click that it will lead to the map marker thats next to it [in my case] .

How do i achive this pls. thank you.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

"when you click that it will lead to the map marker thats next to it"

The archive lists posts, and displays the same results as markers on a map.

Clicking either the post or the marker would normally take you to the single post (where you might also display a map with the single marker).

What is it you want to do?

If a user clicks an icon on a post in the list of results, it should, what?, stay on the same page, displaying the same map, but "lead to the map marker", which means what exactly?

[Akhil]

Hi nigel.

Sorry for confusion.
on the archieve page i will create a map icon.
clicking that i want it to lead to the marker on the map on the SAME page.
clicking the title of course it goes to the detail page .

Thanks

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

"lead to the marker" is the bit I'm struggling with.

You mean the related marker should be highlighted when clicking the icon, or did you have something else in mind, such as when there are a lot of results, clicking the map icon scrolls back to where the map is shown?

[Akhil]

Yes youre right. : related marker should be highlighted when clicking the icon,

[Akhil]

Hi nigel, it seems toolset already have this function inside. great . below codes works , no idea whats the differences but it works.

 

<button class="js-wpv-addon-maps-focus-map Classnames js-toolset-maps-open-infowindow-map-directory-marker-[wpv-post-id]" data-map="map-directory" data-marker="marker-[wpv-post-id]">click map</button>
      
<button class="js-wpv-addon-maps-focus-map" data-map="map-directory" data-marker="marker-[wpv-post-id]">
Focus on marker</button> <!--infowindow missing?-->

<a href="#" class="js-wpv-addon-maps-focus-map js-toolset-maps-open-infowindow-map-directory-marker-[wpv-post-id]" data-map="map-directory" data-marker="marker-[wpv-post-id]">FIND ON MAP</a>

How can i have the marker with infobox open when clicking ? should i open another thread for this ?
thanks.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

That's right, you can add a clickable element that will focus on a marker.

(It is described here: https://toolset.com/documentation/user-guides/maps-shortcodes/#map-focus-on-marker)

But it does just that, focuses on the marker.

The info window that appears when you click on the marker itself is initially closed.

Let me check with the developer if he can short-cut me towards a JS event that could be used to simulate the click that would open the info window (otherwise it will likely mean a feature request).

I should hear from him in the morning, and I'll update you.

[Akhil]

Thats great, thanks. have a good day ,

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

OK, so try adding the following JS to your View that outputs the map:

jQuery( document ).ready( function( $ ) {
    $( document ).on( 'click', '.js-wpv-addon-maps-focus-map', function( e ) {
        var $this = $( this );
        var mapId;
        var markerId;

        if (
            $this.attr( 'data-map' )
            && $this.attr( 'data-marker' )
        ) {
            mapId = $this.data('map');
            markerId = $this.data('marker');

            google.maps.event.trigger( WPViews.view_addon_maps.get_map_marker( markerId, mapId ), 'click' );
        }
    } );
} );

I just tried it on my local test site and it worked.

[Akhil]

Thabnks but Do i need to change anything inside ?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Nope, unless I've misunderstood what you have done already, the code doesn't require any editing, just add it to the custom JS section of your View that displays the map and list of results.

[Akhil]

excellent !

My issue is resolved now. Thank you!