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

Answer 1

Take a look at this sample.

This is how you subscribe to the client event.

@(
    Html.Googlemap()
        .Name("map")
        .Markers(m => m.Add()
                       .Id("marker-1")
                       .Title("Hello World!"))
        .ClientEvents(events => events.OnMapLoaded("onMapLoadHandler")) 
 )

<ul class="marker-list">
    <li data-id="marker-1">My Marker</li>
</ul>

and this is how to trigger the map click.

<script type="text/javascript">
        var markers = {};
        function onMapLoadHandler(args) {
            markers = args.markers;
        }
        $(".marker-list li").click(function () {
            var id = $(this).attr('data-id');
            google.maps.event.trigger(markers[id], 'click');
        });
</script>

Answer 2

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 3

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.