hrtestrt hrtestrt - 4 months ago 16
jQuery Question

Associating List Item with Google map Marker

If you first look at the fiddle:

https://jsfiddle.net/80m1psmy/7/

It will be easier to understand.

Basically, the li's in the first tab "bars" work fine, if you click the li, the associated marker shows it's info. However, this doesn't work for the other tabs?

I wish to have the same functionality for all tabs.

Here is the associated code:

$('#bars-list li').each(function(i, e) {
$(e).click(function(i) {
return function(e) {
google.maps.event.trigger(gmarkers[i], 'click');
}
}(i));
});


I guess I need to add a
$(this)
so that it isn't specific to one particular list, but am unsure on how to implement this?

Thank you in advance!

Answer

The issue is your selector #bars-list li.

Even when you add the same code for the other tabs it will not work as expected, because the index(i) will be based on the items of the current tab, not on all items, so when you click on e.g. the first item of any tab it will trigger the click always for the first marker(not for the first marker of the related category).

You must use a selector which includes all items, e.g. .lists li

https://jsfiddle.net/6mqooqd9/

Comments