[Resolved] ToTop when js-wpv-addon-maps-focus-map

[Author]

Posts

[romanB-3]

Hello,
I have a very long list of posts, and when clicking on "center on the map", the page should go to top in order to see the map. How may I achieve this ?
Thank you.

[Waqar]

Hi there,

Thank you for contacting us and I'll be happy to assist.

To make the page scroll to the map on top when the "focus on marker" link is clicked, you'll need to add some custom jQuery script. For example:

$(".js-wpv-addon-maps-focus-map").click(function() {
    $('html, body').animate({
        scrollTop: $("#js-wpv-addon-maps-render-map-1").offset().top - 70
    }, 1000);
});

Feel free to replace the class "js-wpv-addon-maps-focus-map" with the actual class attached to your marker focus link and the ID "js-wpv-addon-maps-render-map-1" with actual ID of your map's container.

For a more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

I hope this helps.

regards,
Waqar

[romanB-3]

This works great thank you very much.
Is it also possible to open the popup window related to the pin on the map on this same action ?
Thank you.

[Waqar]

Hi,

Thanks for the update and glad the script works.

To make the marker's popup window also open when the "focus on marker" link is clicked, you'll find a "Clicking this item will also open the marker popup" checkbox, on the "Interaction" tab (when adding the focus on marker link).
( screenshot: hidden link )

For an already added link, you can include a special class "js-toolset-maps-open-infowindow-map-map-ID-marker-marker-ID" to it.
(where you'll replace "map-ID" with map's actual ID and "marker-ID" with the marker's actual ID)

For example, if your existing link's code is:

<a href="#" class="js-wpv-addon-maps-focus-map" data-map="map-1" data-marker="marker-[wpv-post-id]">Show on map</a>

It will become:

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

regards,
Waqar

[romanB-3]

Thank you, this also works great.

Nevertheless, I just noticed a small problem with the "totop" functionality : I use a sticky header, and the top part of the map is hidden by it. Would it be easily possible to improve ?

[Waqar]

Hi,

You can increase value "70" in the script and it will increase the offset value from the top of the page when scrolled.

regards,
Waqar

[romanB-3]

My issue is resolved now. Thank you!