[Resolved] highlight marker when list item is hovered over

[Author]

Posts

[allisonT]

Tell us what you are trying to do? I would like to hover over one of the listings on the list on my page and the appropriate map marker highlight. I've attached a screenshot of what i want it to do.

Is there any documentation that you are following? I found this link to a support ticket and it works great - https://toolset.com/forums/topic/highlight-a-view-list-item-from-a-google-map-click/ - BUT I need to do the opposite - When i hover over the list item I'd like for the marker to highlight. It seems like this example (that works the opposite) would just need a little tweaking. Can you help me with this? I copied the code exactly and replaced Map-1 in the example with Map-15 to make it work.

Is there a similar example that we can see? In this sample - when i hover over the list, you can see the markers change color - hidden link This is EXACTLY what i want to do

What is the link to your site? hidden link - you can see here that if you hover over a marker icon, the list highlights in red... i'd like for it to do the opposite - hover over the list and the marker highlight

[Shane]

Hi Allison,

Thank you for getting in touch. I believe what needs to be changed here is the listener type.

Given that Waqar had set it to click you can try using mouseover like below.

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='map-1';
        for(var marker in markers[ map ]) {
            markers[ map ][marker].addListener('mouseover', function() {
                jQuery('.result-item-container').removeClass('highlighted');
                jQuery('.result-item-container[data-item-title="'+this['title']+'"]').addClass('highlighted');
            });
        }
    });
});

Please let me know if this helps.
Thanks,
Shane

[allisonT]

Thanks, but that was not my issue. I need to be able to hover over the LIST ITEM to make the MARKER CHANGE COLORS TO BLUE. Can you tell what change to make to do that?

[Shane]

Hi Allison,

You mentioned that the code that Waqar had provided work for when you click on the item.

Can you restore the original code and verify that the solution by Waqar works before we continue ?

This is so that we have a baseline to work with as we are currently working on Custom Code which is out of our support scope, so my assistance will be limited.

Thanks,
Shane

[allisonT]

The code that Waqar provided works fine, it's just not exactly what I'm needing. I'm reattaching the screenshot with my instructions on it. It may be helpful to just ignor Waqars code for now and help me understand how to accomplish the task of hovering over a list item to change the icon on the map marker. Can you help me with this? If this is 'custom', please direct me to someone who can work with me on this.

[Shane]

Hi Allison,

Based on what i'm seeing here you won't be able to simply change the color because the markers are using images. What you can do is to change the image itself.

I would like to test some code that i've crafted but your site seems to be throwing some JS errors.

Particularly this one below.
(index):539 Uncaught ReferenceError: markerHov is not defined

It seems you have an onclick attribute on one of your divs that is expecting the markerHov function. Has this function been declared?

Please let me know.
Thanks,
Shane

[allisonT]

Thanks for letting me know. I was testing something as well, but I will leave this instance for you to work on. If you continue getting errors, please let me know. Any help would be greatly appreciated.

Thank you!

[Shane]

Hi Allison,

I will need admin access as well to test the javascript.

However it should be noted that I cannot guarantee that I will be able to resolve the issue as this is custom code but its worth an attempt.

I've enabled the private fields for your next response.
Thanks,
Shane

[allisonT]

Have you been able to successfully log in to my site to test your code? Any help is greatly appreciated. Thanks!

[Shane]

Hi Allison,

I have a bit of disappointing news. It seems that this will require a bit more custom code to achieve. Unfortunately my experience and knowledge on the Google Maps API is limited and this would already be considered out of scope work.

The most I can do is to set an option that when the user hovers over the Highlight Marker text it zooms to the actual marker.

Anything else would require custom coding from an independent contractor from the link below.
https://toolset.com/contractors/

Thanks,
Shane