How to highlight markers when hovering on Google Maps to sort a table?

Question

I have a table that I made sortable using the jQuery Tablesorter 2.0 plugin . On the same page, I have a Google map that displays a marker for each element of the table. Now I want to make it so that when a <tr>freezes, the corresponding marker on the Google map is highlighted. I also want to do the opposite, when clicking on the marker will highlight the table row.

The problem I am facing is that I do not know how to associate a marker with a table row. I can get the coordinates and markers for each element 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 associate this marker array with the rows of the table, given that the rows can be sorted. Any help in the right direction will be appreciated, as I am now very fixated.

Answer 1

I suggest moving markers to the global array first so that you can reference them by number. Put the code that references the marker inside the table before sorting it. Maybe something like

  var n=gmarkers.length - 1;

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

The array and any other variables or functions that you mention in your table must be global, as JavaScript ran from HTML to tables in a global context.

createMarker(), Function Closure , , - , .

Answer 2

.

/. id GEvent , . id.

, , .

, , - .

Answer 3

Take a look at this sample.

This is how you subscribe to a customer 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 here's how to trigger a 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>