[Resolved] Change map marker on click and hover over listing items

[Author]

Posts

[sebastianB-7]

First of all you guys doing a great job and the toolset tool is really handy once you learned how to use it.

Tell us what you are trying to do?
I have a map with markers and listing Items below.

1. I want to change the marker icon image when clicking on any marker.

To archive this I tried the following code regarding my map-ID is map-6 (my marker id is marker-4 but i think its not important):
jQuery(document).ready(function($){
$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
var markers = WPViews.view_addon_maps.markers;
var map_6_markers = markers['map-6']; // here replace "map-6" with your map ID
//console.log(map_1_markers);
for(var i in map_6_markers) {
var marker = map_6_markers[i];
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
for (var j in map_1_markers) {
map_6_markers[j].setIcon("//link-hidden-44x44-1.png");
}
marker.setIcon("//link-hidden-map-marker-44x44-lila.png");
};
})(marker, i));
}
});

To check it I used console-log-text but the text is not appearing in console, so i think something with the initialisation is not working
The png-path should be fine too.

2. I want to change the marker icon image when hovering over a result listing item shown below the map.
Quite challenging task maybe you have a good advice?

Is there any documentation that you are following?
https://toolset.com/forums/topic/change-google-map-marker-on-click/#post-1762225

What is the link to your site?
hidden link
(Please hide the link)

[Minesh]

Hello. Thank you for contacting the Toolset support.

Like the reference link you shared:
- https://toolset.com/forums/topic/change-google-map-marker-on-click/#post-1762225

If you noticed the setIcon is set using the full image path. Can you please try to give full image path with setIcon and check if that help you to resolve your issue.

[Minesh]

I would like to clarify first. You want to change the marker image when user hover on it or you when user click on it?

*** 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]

I found that with the page:
- hidden link

Within the section "Add code to the < body > (good for tracking codes such as google analytics)" - you added the following code:

<script> 
		// format-date-difference --> FÜR TOOLSET
// Custom shortcode that displays a formatted string showing the difference between two dates
// @start - Unix timestamp, default is current timestamp
// @end - Unix timestamp, default is current timestamp
// @format - DateInterval format, default is '%y years': see <em><u>hidden link</u></em>
// example: [format-date-difference start="[types field='year-of-birth' output='raw'][/types]" format="You are %y years old"][/format-date-difference]
add_shortcode( 'format-date-difference', 'format_date_difference_func');
function format_date_difference_func($atts = [])
{
  $atts = shortcode_atts([
    'start' => date('U'),
    'end' => date('U'),
    'format' => '%y years, %m months, %d days',
  ], $atts);
  if( trim($atts['start']) == '' || trim($atts['end']) == '')
    return;
  $datetime1 = new DateTime();
  $datetime1->setTimestamp($atts['start']);
  $datetime2 = new DateTime();
  $datetime2->setTimestamp($atts['end']);
  $interval = $datetime1->diff($datetime2);
  return $interval->format($atts['format']);
}
	
</script>	

I removed the above code as its PHP code that is the first thing causing the issue and you wrapped with the script tag that is totally wrong.

I can still see the error on your browser's console:

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

Can you please disable plugins one by one and check what plugin is loading the additional map API.

[sebastianB-7]

Thank you. I changed this. I know there are still some adjustments to do.

I checked all plugins but there is no other Google API use.
I also try to change the theme, use the map as a shortcode, use only 1 API inside of toolset, deactivate all the codes and some other things.
What I see is that the error is gone if I remove the toolset-map but since I want to show the map this is not a solution.

[Minesh]

The 2nd google map API key is added by the plugin "Real Cookie Banner" so I've deactivated this plugin for now.

Then I've adjusted the custom JS code to your view's JS box as given under:
=> hidden link

jQuery(document).ready(function($){

  
jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed',function(event_settings) {
    var markers = WPViews.view_addon_maps.markers;
    var map_6_markers = markers['map-6']; // here replace "map-1" with your map ID
    //console.log(map_1_markers);
    for(var i in map_6_markers) {
      var marker = map_6_markers[i];
      google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
          for (var j in map_6_markers) {
            map_6_markers[j].setIcon("<em><u>hidden link</u></em>");
          }
          marker.setIcon("<em><u>hidden link</u></em>");
        };
      })(marker, i));
    }
});

});

Can you please confirm it works as expected now.

[sebastianB-7]

Ok, thank you. Now the code is working nicely I also tried it out with other .png.
The problem now is, that the image is not staying the same after it is clicked.
I have 3 images set up for the map.
First image is for the markers
Second image is for hovering on markers
Third Image is for clicked event (see jQuery before).

If I hover over the image it's changing to second image, if I click on the image it's changing to third image but if I remove the mouse from the marker (without clicking) it changes again to the first image. But it should be the image of the JQuery as long as I click on another marker.

[Minesh]

Actually - this is a custom JS code and we offer limited support for such custom edits.

I already shown you the way and working example how you can achieve this and you're welcome to modify the shared code or adjust it as required or you can contact any of our certified partners who will help you with any of your custom programming requirement.
- https://toolset.com/contractors/

Thank you for understanding and have a great time ahead.