title: Highlight polyline route when clicking on it (Google Maps v3)
body: <p>I have a lot of routes on my map and I would like to highlight a route when I click on it. Well, actually I click on a stop-marker = last position in route. This is my code:</p>
  
  <pre><code>function initialize() {
  
    var mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); // need this as global variable (used outside this $(document)
  
    // Get all trips within selected timespan
    $.ajax({
      dataType: "json",
      type: "get",
      url: "data.json"
    }).done(function(jsonRoutes) {
  
      var lastLatLng = null; // needed for placing a marker on the last stop-position
  
      // Define an "InfoWindow" for clicking on the stop-position marker
      var infowindow = new google.maps.InfoWindow({
      });
  
      // Click anywhere on the map to close the info window
      google.maps.event.addListener(map,"click",function() {
        infowindow.close();
      });
  
      // Get all routes from a JSON query
      $.each(jsonRoutes, function(key,obj) {
  
        coordinatesRoute = []; // clear/set an array holding all coordinates
  
        var data = obj.data; // object which contains all JSON data
  
        // Walk through each position in the route
        $.each(data, function(key,obj) {
          var lat = obj.lat;
          var lng = obj.lng;
  
          // Push actual coordinate to both coordinate arrays
          coordinatesRoute.push(new google.maps.LatLng(lat,lng));
          coordinatesAll.push(new google.maps.LatLng(lat,lng));
  
          lastLatLng = new google.maps.LatLng(lat,lng); // store the last position
        });
  
        // Draw the polyline route (the whole route)
        var polylinePath = new google.maps.Polyline({
          path: coordinatesRoute,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
        polylinePath.setMap(map);
  
         // Insert a "stop-position" marker (last position in route)
        var icon = new google.maps.MarkerImage("icon.png",null,null,new google.maps.Point(0,8));
        var marker = new google.maps.Marker({
          position: lastLatLng,
          title: "Stop",
          map: map,
          zIndex: 5000,
          icon: icon
        });
  
        // Click on a "stop-position" marker to open an info window
        google.maps.event.addListener(marker,"click",function() {
          infowindow.open(map,this);
          infowindow.setContent(this.title);
        });
  
      }); // $.each(jsonRoutes, function(key,obj)
  
      // Auto center/zoom map to show all routes
      // Source: http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/
      var bounds = new google.maps.LatLngBounds(); // create a new viewpoint bound
      for(var i = 0, LtLgLen = coordinatesAll.length; i &lt; LtLgLen; i++) {
        bounds.extend (coordinatesAll[i]); // increase the bounds to take this point
      }
      map.fitBounds(bounds);
  
    }); // $.ajax
  
  } // initialize()
  </code></pre>
  
  <p>Can anyone help me out what I need to be able to highlight any route I click?</p>