How do I highlight markers on hover in Google Maps for a sortable table?

Question

I have a table that I've made sortable using the jQuery plugin Tablesorter 2.0. On the same page, I have a Google Map that displays a marker for each item in the table. Now, I want to make it so that when a <tr> is hovered, the corresponding marker on the Google Map is highlighted. I also want to do the vice versa, where clicking on a marker will highlight the table row.

The problem I'm running into is that I don't know how to associate a marker with a table row. I can get the coordinates and markers for each item by using (in Javascript):

var list = [
    <% foreach (var item in Model) { %>
        new GMarker(new GLatLng(<%= item.Latitude %>, <%= item.Longitude %>)),
    <% } %> ];

and this works fine, but I don't know how to then relate this array of markers with the table rows, considering that the rows can be sorted. Any help in the right direction would be appreciated, as I'm pretty stumped right now.

Answer 1

I would suggest creating each row at the same time that you create each marker.

In each iteration of the loop, generate an id for that marker/row. Add the id to the row, and add a GEvent listener to the marker with the code to highlight the row of the same id. Add the marker to an array with the index of the id.

You can add a listener for the row mouseover which gets the row id, which you can use to access the related marker from the array.

If I have time later, I'll see if I can come up with some code.

Answer 2

I suggest that you first push your markers into a global array, so that you can refer to them by number. Place the code that references the marker inside your table before you sort it. Perhaps something like

  var n=gmarkers.length - 1;

  onclick='GEvent.trigger(gmarkers[' +n+ '],"click")'

The array, and any other variables or functions you mention in your table, needs to be global, because JavaScript launched the from HTML in the tables executes in global context.

You'll almost certainly need to use a createMarker() function to hold Function Closure on the variables associated with your markers in order to do anything useful with your markers once you've associated them with table entries.