[Resolved] Issue with Markers on Map built using shortcodes vs. Map Block

[Author]

Posts

[claudiaP]

Hi there - I built the main location page in blocks and was able to create a map that has smaller marker that appear larger on mouseover here:
hidden link

The client would like the same mouseover effect on maps that are placed in the provider content template here (for example):
hidden link

The provider template is built in WP Bakery and uses shortcodes to pull in toolset data and to build the map. The map code currently looks like this:

{!{wpv-map-render map_id='map-5' map_width='100%' map_height='500px' marker_icon='/wp-content/uploads/2024/05/mapmarker60-small.png' marker_icon_hover='/wp-content/uploads/2024/05/mapmarker60.png'}!}{!{/wpv-map-render}!}

I'm using the same marker icon as on the find a location page, and the same marker icon hover as well, but the hover effect doesn't work, and the markers don't look right. How do I fix this?

Thanks for your help!

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share details where exactly I can see the map code you shared that is added to WP Bakery you shared.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site.

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

[Minesh]

Can you please check now: hidden link

The view where you added the marker shortcode as given under:
=> hidden link

[wpv-map-marker map_id='map-5' marker_id='marker-[wpv-post-id]' marker_field='wpcf-map-address' marker_icon_hover='/wp-content/uploads/2024/04/map-marker.png' marker_icon='/wp-content/uploads/2024/04/map-marker.png']
<div class="map-popup"><h3>[types field='clinic-name'][/types]</h3>
<p class="pop-address">[types field='loc-address-1'][/types] [types field='loc-address-2'][/types]<br/>
[types field='loc-city'][/types] [types field='loc-state'][/types], [types field='loc-zip-code'][/types]</p>
  <p class="pop-phone"><a href="tel:[types field='phone'][/types]">[types field='phone'][/types]</a></p>
  <p class="pop-directions"><a href="[types field='google-directions-link'][/types]">Get Directions</a></p>
  <a class="pop-button" href="[wpv-post-url]">View Website</a>
</div>
[/wpv-map-marker]

As you can see with the marker shortcode above you have set "marker_icon" and "marker_icon_hover" attributes.

I've changed the above shortcode as given under and saved the template:

[wpv-map-marker map_id='map-5' marker_id='marker-[wpv-post-id]' marker_field='wpcf-map-address' ]
<div class="map-popup"><h3>[types field='clinic-name'][/types]</h3>
<p class="pop-address">[types field='loc-address-1'][/types] [types field='loc-address-2'][/types]<br/>
[types field='loc-city'][/types] [types field='loc-state'][/types], [types field='loc-zip-code'][/types]</p>
  <p class="pop-phone"><a href="tel:[types field='phone'][/types]">[types field='phone'][/types]</a></p>
  <p class="pop-directions"><a href="[types field='google-directions-link'][/types]">Get Directions</a></p>
  <a class="pop-button" href="[wpv-post-url]">View Website</a>
</div>
[/wpv-map-marker]

Can you please confirm it works as expected now.