Highlight route on both map and in HTML list-view with Google Maps v3

Question

I have a map with many routes and I would like to show all the routes in a HTML list-view below the map too and then see some interaction when I click on either the map or within the list-view. This is my code:

initialize();

$("#routes a").click(function() {
    $("#debug").html("<p>I will highlight a "+ $(this).text() +"</p>");
});

function initialize() {

    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(10.012552, 76.327043),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // Define an info window
    var infowindow = new google.maps.InfoWindow({
        content: ""
    });

    var highlightedPoly;

    // ---------------------------------------------------------

    // Encapsulate below (simulates my JSON scope)
    (function () {

        // Route 1 array
        var polylineCoordinates = [
        new google.maps.LatLng(10.013566, 76.331549),
        new google.maps.LatLng(10.012552, 76.327043) 
        ];

        var polyline = new google.maps.Polyline({
            title: "This is the FIRST route",
            path: polylineCoordinates,
            strokeColor: '#FF0000',
            strokeOpacity: 2.0,
            strokeWeight: 5
        });

        polyline.setMap(map);

        // Add a "click" event for this route
        google.maps.event.addListener(polyline, "click", function (e) {
            // Un-highlight the current highlighted trip (if any)
            if (highlightedPoly) {
                highlightedPoly.setOptions({
                    strokeColor: "#FF0000",
                    zIndex: 1
                });
            }
            // Highlight the clicked trip
            polyline.setOptions({
                strokeColor: "#00FFAA",
                zIndex: 6000
            });
            // Save the trip in a global variable (needed for closure)
            highlightedPoly = polyline;

            infowindow.setPosition(e.latLng);
            infowindow.setContent(this.title);
            infowindow.open(map);
        });

        // Add this route to the HTML
        $("#routes").append("<a href='#'>Route 1</a><br />");

    })(); // close the encapsulation

    // ---------------------------------------------------------

    // Encapsulate below (simulates my JSON scope)
    (function () {

        // Route 2 array
        polylineCoordinates = [
        new google.maps.LatLng(10.014566, 76.331549),
        new google.maps.LatLng(10.015552, 76.327043)
        ];

        var polyline = new google.maps.Polyline({
            title: "This is the SECOND route",
            path: polylineCoordinates,
            strokeColor: '#FF0000',
            strokeOpacity: 2.0,
            strokeWeight: 5
        });

        polyline.setMap(map);

        // Add a "click" event for this route
        google.maps.event.addListener(polyline, "click", function (e) {
            // Un-highlight the current highlighted trip (if any)
            if (highlightedPoly) {
                highlightedPoly.setOptions({
                    strokeColor: "#FF0000",
                    zIndex: 1
                });
            }
            // Highlight the clicked trip
            polyline.setOptions({
                strokeColor: "#00FFAA",
                zIndex: 6000
            });
            // Save the trip in a global variable (needed for closure)
            highlightedPoly = polyline;

            infowindow.setPosition(e.latLng);
            infowindow.setContent(this.title);
            infowindow.open(map);
        });

        // Add this route to the HTML
        $("#routes").append("<a href='#'>Route 2</a><br />");

    })(); // close the encapsulation

    // ---------------------------------------------------------

    // Click anywhere on the map to close the info window
    google.maps.event.addListener(map, "click", function () {
        if (highlightedPoly) {
            highlightedPoly.setOptions({
                strokeColor: '#FF0000',
                zIndex: 1
            });
            highlightedPoly = null;
        }

        infowindow.close();
    });

}

Ideally I would like that when I hover the mouse (or click) over one of the routes in the list-view that it then would highlight the route on the map... and the opposite way, when I highlight a route on the map it should then highlight the route in the list-view:

The list-view is generated dynamically like this together with each route:

$("#routes").append("<a href='#'>Route 2</a><br />");

Can I somehow link the two together?

I have a Fiddle demo availabe.

score 1 · Accepted Answer · edited May 23 '17 at 11:44

Intrigued by this answer How to remove polylines of google maps api 3 I experimented with it and I found the solution myself.

Basically I need to have a global array with all routes and then do some jQuery/CSS directly in the google.maps.event.addListener.

This is the code needed to highlight the map (from list-view click):

// My global variables
var allRoutes = [];
var highlightedPoly;

$("#routes a").click(function () {
    $("#debug").html("<p>I will highlight " + $(this).text() + "</p>");

    var dataIndex = $(this).data("index");

    polyline = allRoutes[dataIndex];
    // Un-highlight the current highlighted trip (if any)
    if (highlightedPoly) {
        highlightedPoly.setOptions({
            strokeColor: "#FF0000",
            zIndex: 1
        });
    }
    // Highlight the clicked trip
    polyline.setOptions({
        strokeColor: "#00FFAA",
        zIndex: 6000
    });
    // Save the trip in a global variable (needed for closure)
    highlightedPoly = polyline;
});

And this is to highlight the list-view (from map/route click):

// You must add a property, "index", to the polyline object.

// In each .addListener (to highlight in list-view)
$("#routes").find("[data-index='"+ this.index +"']").css("background-color", "khaki");
----
// In the "close infowindow" .addListener (disable highlight in list-view)
$("#routes a").css("background-color", "");

Highlighted route in both the map and in the list-view:

I have updated the Fiddle demo. I know it is using static stuff but this is trivial to make dynamic.

UPDATE #1

There was an error in the Fiddle demo I discovered once I implemented this test-code.

Highlight route on both map and in HTML list-view with Google Maps v3

1 Answers1