[Resolved] Map Focus on Marker not working

[Author]

Posts

[melanieG-2]

Tell us what you are trying to do?
I'm trying to have the map zoom in on a marker and open the popup window when clicking on a button

Is there any documentation that you are following? https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#map-focus-on-marker

What is the link to your site? hidden link

Here is my my map code:
[wpv-map-render map_id="map-9" map_height="80vh" map_type_control="off" single_zoom="18" street_view_control="off" marker_icon="[wpv-post-body view_template="dev-marker-color"]" style_json="hidden link"][/wpv-map-render]

My button code (I tried different version of it without results)
<button class="button primary is-underline is-small lowercase js-wpv-addon-maps-focus-map .js-toolset-maps-open-infowindow-map-9-markerdev-[wpv-post-id]" data-map="map-9" data-marker="[wpv-post-id]-markerdev">View on map</button></div>

Marker ID is "markerdev"
Map ID is "map-9"

What am I doing wrong?
Thanks for your help!

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

Hi Melanie

I can't tell from what you've shared exactly what the problem is, the key information that's missing is your wpv-map-marker shortcode.

What you have for the data-marker attribute of your button element should correspond to the marker-id attribute of the wpv-map-marker shortcode.

The marker IDs need to be unique for you to be able to focus on them, and you might dynamically generate a unique marker ID by using the post ID of the current loop iteration to generate the ID. In your example the button has

data-marker="[wpv-post-id]-markerdev"

in which case the wpv-map-marker shortcode should generate its ID the same way, e.g.

marker_id="[wpv-post-id]-markerdev"

Is that what you have?

(As an aside, you have a button class added with a dot which I don't think is intended.)

[melanieG-2]

Oh I see where I made a mistake now, Thank you! My issue is resolved now.